javascript 动态添加一行后如何刷新JQuery移动表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9334633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to refresh JQuery mobile table after a row is added dynamically
提问by user1014759
I am adding rows to a JQ Mobile table based on a JSON string that I am getting from the server.
我正在根据从服务器获取的 JSON 字符串向 JQ Mobile 表添加行。
The first time I go to the page after a refresh, none of the styling is added, however everything works fine everytime after that.
刷新后我第一次进入页面时，没有添加任何样式，但是之后每次都正常。
Is there a way to refresh/initialize a table as you can for listviews?
有没有办法像列表视图一样刷新/初始化表？
The code below is where I am adding the rows:
下面的代码是我添加行的地方：
$.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>');
回答by stevenhancock
You shouldbe able to just use:
$("#myTable").table("refresh");
你应该能够只使用：
$("#myTable").table("refresh");
But it hasn't been implemented for version 1.3.0 of jquery mobile.
但它尚未在 jquery mobile 1.3.0 版中实现。
See https://github.com/jquery/jquery-mobile/issues/5570
见https://github.com/jquery/jquery-mobile/issues/5570
Sounds like you have to either add the rows before the page is initialized, or don't set the table's attribute data-role="table"until after the rows have been added.
$("#myTable").table();
听起来您必须在页面初始化之前添加行，或者在添加行之前不要设置表的属性data-role="table"。
$("#myTable").table();
In the implementation I am working on, I allow users to add rows. Luckily for me the site is designed to be viewed with larger mobile devices so I can wait for 1.3.1
在我正在处理的实现中，我允许用户添加行。幸运的是，该网站旨在使用更大的移动设备查看，因此我可以等待 1.3.1
回答by Phill Pafford
I would suggest you use .trigger('create'); and refresh the page, jQM Docs:
我建议你使用 .trigger('create'); 并刷新页面，jQM Docs：
Enhancing new markup
The page plugin dispatches a pagecreate event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page.However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:
增强新标记
页面插件调度 pagecreate 事件，大多数小部件使用它来自动初始化自己。只要引用了小部件插件脚本，它就会自动增强它在页面上找到的小部件的任何实例。但是，如果您在客户端生成新标记或通过 Ajax 加载内容并将其注入页面，则可以触发 create 事件来处理新标记中包含的所有插件的自动初始化。这可以在任何元素（甚至页面 div 本身）上触发，从而为您省去手动初始化每个插件（列表视图按钮、选择等）的任务。
例如，如果通过 Ajax 加载了一个 HTML 标记块（比如一个登录表单），触发 create 事件以自动将它包含的所有小部件（在本例中为输入和按钮）转换为增强版本。这个场景的代码是：
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
