如何在动态添加行后刷新JQuery移动表

Question

我基于我从服务器获取的JSON字符串向JQ Mobile表添加行.

刷新后第一次进入页面时,没有添加任何样式,但是每次都可以正常工作.

有没有办法像列表视图一样刷新/初始化表格？

下面的代码是我添加行的地方:

$.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>');

Answer 1

你应该可以使用: $("#myTable").table("refresh");

但它还没有在jquery mobile的1.3.0版本中实现.

请参阅https://github.com/jquery/jquery-mobile/issues/5570

听起来你必须在页面初始化之前添加行,或者在添加行之前不要设置表的属性data-role ="table". $("#myTable").table();

在我正在开发的实现中,我允许用户添加行.幸运的是,该网站旨在用更大的移动设备查看,所以我可以等待1.3.1

Answer 2

我建议你使用.trigger('create'); 并刷新页面,jQM文档:

• http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html

增强新标记
页面插件调度pagecreate事件,大多数小部件都使用它来自动初始化自己.只要引用了一个小部件插件脚本,它就会自动增强它在页面上找到的小部件的任何实例.

但是,如果您通过Ajax生成新标记客户端或加载内容并将其注入页面,则可以触发create事件来处理新标记中包含的所有插件的自动初始化.这可以在任何元素(甚至页面div本身)上触发,从而节省了手动初始化每个插件(listview按钮,选择等)的任务.

例如,如果通过Ajax加载了一个HTML标记块(比如一个登录表单),则触发create事件以自动将它包含的所有小部件(在这种情况下为输入和按钮)转换为增强版本.此方案的代码为:

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