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

【问题标题】：How to refresh JQuery mobile table after a row is added dynamically动态添加行后如何刷新JQuery移动表
【发布时间】：2012-03-09 05:30:36
【问题描述】：

我正在根据从服务器获取的 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>');

【问题讨论】：

不管怎样，我在 Chrome 中尝试了您的示例并立即获得了样式。也许移动设备有问题？

标签： javascript jquery-mobile html-table dynamically-generated

【解决方案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

【讨论】：

在稍后阶段添加data-role="table" 的好处。问题仍然是，如何刷新，例如在行中分页。

【解决方案2】：

我建议你使用 .trigger('create');并刷新页面，jQM Docs：

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

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

但是，如果您在客户端生成新的标记或通过以下方式加载内容 Ajax 并将其注入到页面中，您可以触发 create 事件处理其中包含的所有插件的自动初始化新的标记。这可以在任何元素上触发（甚至是页面 div 本身），省去了手动初始化每个插件的任务（列表视图按钮、选择等）。

例如，如果加载了一个 HTML 标记块（比如登录表单）在通过Ajax，触发create事件自动变换它包含的所有小部件（在这种情况下为输入和按钮）到增强版本。这个场景的代码是：

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

【讨论】：