Проблема при добавлении динамических данных

Question

Мне нужна небольшая помощь в jQuery Mobile Foo Table. Я динамически добавляю данные в таблицу.

HTML:

<table id="tblSRNDetails" class="footable"> 
     <thead> 
      <tr> 
       <th data-class="expand">SRN</th> 
       <th >Failure Date</th> 
       <th >Complaint Report Date</th>     
       <th>Promised Date</th> 
       <th >Customer Name</th> 
       <th >Log Time</th> 
       <th >Create FSR</th>  
       <th data-hide="phone,tablet">Days Open</th>   
       <th data-hide="phone,tablet">SRN Allocated Time</th> 
       <th data-hide="phone,tablet"> SRN Status</th> 
       <th data-hide="phone,tablet"> ESN Number</th> 
       <th data-hide="phone,tablet"> Request Type</th>  
       <th data-hide="phone,tablet">Service Request Details</th>       
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 

код расслоение плотной:

$("#page-id").live('pagebeforeshow', function() { 
    console.log("Page before show"); 
    $("#tblSRNDetails > tbody tr").remove(); 
    for (var indx = 0; indx < 2; indx++) 
    { 
     $("#tblSRNDetails > tbody").append("<tr>"+ 
     "<td>Name</td>"+ 
     "<td>failureDate</td>"+ 
     "<td>complaintReportDate</td>"+ 
     "<td>promisedDate</td>"+ 
     "<td>custName</td>"+ 
     "<td><a href='#'><b>Log Time</b></a></td>"+ 
     "<td><b>Create FSR</b></td>"+ 
     "<td>daysOpen</td>"+ 
     "<td>allocatedTime</td>"+ 
     "<td>srn_status</td>"+ 
     "<td>ESNNumber</td>"+ 
     "<td>requestType</td>"+ 
     "<td>customerComplaint</td>"+ 
     "</tr>"); 
    } 
    $('#tblSRNDetails').footable(); 
}); 

С этим FooTable применяется правильно, когда открыт впервые. Если я нажму на кнопку домашней страницы и вернусь назад и снова на этой странице, FooTable не будет применен должным образом.

Скриншот:

Поэтому такие проблемы, я столкнулся в то время включают в себя:

1. Скрытые поля показаны. (Средства не применимы): Эта проблема решается после изменения ориентации устройства на два раза.

2. Первое поле не включает кнопку данных Expand больше (Средства Footable не применяется):

Я думаю, что проблема в том, что я удаления старых строк и добавления новых. Я пробовал, не давая удалить звонок. В то время старые строки отображались правильно. В недавно добавленных полях были проблемы, как показано на снимке экрана.

Может кто-нибудь помочь мне с этим?

P.S: Я делаю это в веб-браузере Android. И та же проблема воспроизводится и в браузере.

Answer 1

Foo table был создан как плагин jQuery, и поэтому он никогда не предназначался для работы с jQuery Mobile. Это просто очередной плагин, который не работает корректно с jQuery mobile. Foo table Не знаю, как обращаться с jQuery Переключение мобильных страниц.

Только вы можете заставить его работать, если вы динамически создаете целую таблицу каждый раз, когда вы посещаете эту страницу. В любом другом случае Foo table не будет работать, потому что страница уже существует с расширенной табличной разметкой. Вот почему каждый виджет jQuery Mobile имеет функцию с атрибутом refresh.

Вот рабочий пример: http://jsfiddle.net/Gajotres/PjmEL/

Одна последняя вещь, если это не является хорошим решением для вас, вы должны перейти к реализации JQuery Mobile в dynamic table.

$(document).on('pageshow', '#index', function(){ 
    $("#tblSRNDetails").remove(); 
    $('<table>').attr({'id':'tblSRNDetails','class':'footable'}).appendTo('[data-role="content"]'); 
     $("#tblSRNDetails").append(
      "<thead><tr>"+ 
      "<th data-class='expand'>SRN</th>"+ 
      "<th >Failure Date</th>"+ 
      "<th >Complaint Report Date</th>"+ 
      "<th>Promised Date</th>"+ 
      "<th >Customer Name</th>"+ 
      "<th >Log Time</th>"+ 
      "<th >Create FSR</th>"+ 
      "<th data-hide='phone,tablet'>Days Open</th>"+ 
      "<th data-hide='phone,tablet'>SRN Allocated Time</th>"+ 
      "<th data-hide='phone,tablet'> SRN Status</th>"+ 
      "<th data-hide='phone,tablet'> ESN Number</th>"+ 
      "<th data-hide='phone,tablet'> Request Type</th>"+ 
      "<th data-hide='phone,tablet'>Service Request Details</th>"+ 
      "</tr></thead>"); 
    for (var indx = 0; indx < 2; indx++) 
    { 
     $("#tblSRNDetails").append(
      "<tbody><tr>"+ 
      "<td>Name</td>"+ 
      "<td>failureDate</td>"+ 
      "<td>complaintReportDate</td>"+ 
      "<td>promisedDate</td>"+ 
      "<td>custName</td>"+ 
      "<td><a href='#'><b>Log Time</b></a></td>"+ 
      "<td><b>Create FSR</b></td>"+ 
      "<td>daysOpen</td>"+ 
      "<td>allocatedTime</td>"+ 
      "<td>srn_status</td>"+ 
      "<td>ESNNumber</td>"+ 
      "<td>requestType</td>"+ 
      "<td>customerComplaint</td>"+ 
      "</tr></tbody>"); 
    } 
    $('#tblSRNDetails').footable(); 
}); 

$(document).on('pagebeforeshow', '#second', function(){  

}); 

Answer 2

Я была такая же проблема в моем веб-приложение я использовал это в datatables.net на обратный вызов, я добавил функцию footable перерисовывать и работать прекрасно.

$('table').trigger('footable_redraw'); 

Answer 3

«Полезный» отлично работает с «jQuery Mobile». Я объясню его использование с помощью моих фрагментов кода.

Footable инициализации

function initFootable() { 
    $(function() { 
     $('.footable').footable({ //.footable is my class for table 
      breakpoints: { 
       phone: 480, //Breakpoint width for phones 
       tablet: 1024 //Breakpoint width for tablets 
      } 
     }); 
    }); 
} 

Я использую JQuery AJAX позвонить, чтобы получить новые данные таблицы и добавить их в таблицу, используя метод шаблонный. Я использую handlebars.js для шаблонов. (Помните, что этот шаблонный шаблон не является обязательным. Вы можете использовать свои собственные методы для добавления новых строк в таблицу.)

Итак, после того, как вы обновили новые данные в таблице, вам необходимо вызвать базовые возможности для повторной инициализации , Вот фрагмент кода,

function updateFootable() { 
    var paramTable = $('.footable'); 
    paramTable.footable(); 
    paramTable.trigger('footable_initialize'); //Reinitialize 
    paramTable.trigger('footable_redraw'); //Redraw the table 
    paramTable.trigger('footable_resize'); //Resize the table 
} 

Все триггеры здесь не нужны. Проверьте и подтвердите, какой триггер достаточно для вас, как в соответствии с проблемой, которую вы испытываете при повторной инициализации/перерисовке/изменении размера.

У вас нет проблем с использованием переносимого с jQuery Mobile.

ВАЖНО: Однако вы должны быть осторожны при вызове updateFootable(), если div, содержащий таблицу, или страница, содержащая таблицу, скрыта, тогда таблица не будет изменяться с изменением размера. Вы должны убедиться, что таблица видна, когда вы вызываете ее обновление.

Ссылки:

Вот документ для footable триггеров - http://fooplugins.com/footable/demos/triggers.htm#docs

Убедитесь, что пройти через footable документы - http://fooplugins.com/footable-demos/