问题footable同时加入动态数据 [英] Issue in footable while adding dynamic data
问题描述
我需要在jQuery Mobile的富一点帮助表。 我在一个表中动态添加数据。
I need a little help in jQuery Mobile Foo Table. I am adding data dynamically in a 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>
JS code：
js code:
$("#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不正确应用。
With this FooTable is applied properly when opened for first time. If I click on home page button and go back, and come on that page again, the FooTable is not applied properly.
截图：
所以，我对着那个时候的问题包括：
So issues I am facing at that time include:
-
隐藏字段显示。 （方式Footable不施加）： 改变方向的装置两次后，此问题得到解决。
Hidden fields are shown. (Means Footable is not applied): This issue gets resolved after changing orientation in device for twice.
第一个字段不包含数据展开按钮了（指Footable不适用）：
First field doesn't include Data Expand button anymore (Means Footable is not applied):
我认为这个问题是因为我删除了旧行和添加新的。我试着不给删除通话。当时，正在正常显示的旧行。如图截图新追加的领域是有问题的。
I think the issue is because I am removing the old rows and adding new ones. I tried without giving remove call. At that time, the old rows were being displayed properly. Newly appended fields were having problems as shown in screenshot.
有人可以帮助我？
P.S：我在android的web视图渲染这一点。而同样的问题，转载于浏览器了。
P.S: I am rendering this in android webview. And same problem is reproduced in browser, too.
推荐答案
的符表 创建一个jQuery插件，因此从来没有打算使用jQuery Mobile合作。这只不过是又一个插件无法与jQuery Mobile的正常工作。 符表 不知道如何处理jQuery Mobile的页面切换。
Foo table was created as a jQuery plugin, and as such was never intended to work with jQuery Mobile. It is simply just another plugin not working correctly with jQuery mobile. Foo table don't know how to handle jQuery Mobile page switching.
只有这样，你可以把它的工作，如果你动态地创建整个表每次访问该网页。在任何其他情况下的 符表 将无法工作，因为页面是已经存在具有增强表格标记。这就是为什么每一个jQuery Mobile的小部件有一个刷新性的功能。
Only way you can make it work is if you dynamically create whole table each time you visit that page. In any other case Foo table will not work because page is already there with enhanced table markup. That is why every jQuery Mobile widget has a function with a refresh property.
下面是一个工作的例子： http://jsfiddle.net/Gajotres/PjmEL/
Here's a working example: http://jsfiddle.net/Gajotres/PjmEL/
最后一件事，如果这不是一个很好的解决方案，为你，你应该切换到jQuery Mobile的实施的动态表
One last thing, if this is not a good solution for you you should switch to jQuery Mobile implementation of 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(){
});
这篇关于问题footable同时加入动态数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
