Как обновить мобильную таблицу JQuery после динамического добавления строки - PullRequest
Новая
       9

Как обновить мобильную таблицу JQuery после динамического добавления строки

4 голосов
/ 18 февраля 2012

Я добавляю строки в таблицу JQ Mobile на основе строки JSON, получаемой с сервера.

При первом посещении страницы после обновления ни один из стилей не добавляется, однако после этого все работает нормально.

Есть ли способ обновить / инициализировать таблицу, как вы можете для списков просмотра?

Код ниже, где я добавляю строки: 

$.each(result, function() {
    var imgString;

    if(result[i]["status"] == 'Y') {
        imgString = '<img src= images/checkMark.png height=\"40\" width=\"40\" align=\"middle\">';
    } else {
        imgString = '';
    }

    $('#pickupTable > tbody:last').append('<tr><td class=\"tableRow10\">' +  imgString + 
      '<td class=\"tableRow80\"><a><button class=\"selectPickup\" pickupCode = \"'+ 
      result[i]["id"] + '\"> '+ result[i]["address"] +'</button></a></td></tr>');
    i++;
});

$('#pickupTable > tfoot:last').append('<tr><td colspan="5">Total Pick Ups: ' 
  +result.length + '</td></tr>');

Ответы [ 2 ]

7 голосов
/ 13 марта 2013

Вы должны иметь возможность просто использовать: $("#myTable").table("refresh");

Но это не было реализовано для jquery mobile версии 1.3.0.

См. https://github.com/jquery/jquery-mobile/issues/5570

Похоже, вам нужно либо добавить строки до инициализации страницы, либо не устанавливать атрибут таблицы data-role = "table" до тех пор, пока строки не будутдобавлено.$("#myTable").table();

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

6 голосов
/ 18 февраля 2012

Я бы предложил вам использовать .trigger ('create'); и обновите страницу, JQM Docs:

Улучшение новой разметки
Плагин страницы отправляет событие pagecreate, которое большинство виджетов использует для автоматической инициализации. Как долго поскольку ссылка на скрипт плагина виджета будет автоматически улучшена любые экземпляры виджетов, которые он находит на странице.

Однако, если вы генерируете новую разметку на стороне клиента или загружаете контент через Ajax и внедрить его в страницу, вы можете вызвать событие создания обрабатывать авто-инициализацию для всех плагинов, содержащихся в новая разметка. Это может быть запущено на любом элементе (даже на странице сам div), избавляя вас от необходимости вручную инициализировать каждый плагин (кнопка просмотра списка, выбор и т. д.).

Например, если был загружен блок разметки HTML (например, форма входа в систему) через Ajax вызвать событие create для автоматического преобразования все содержащиеся в нем виджеты (в данном случае входы и кнопки) в расширенные версии. Код для этого сценария будет: 

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
...