富表 http://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/是作为 jQuery 插件创建的,因此从未打算与 jQuery Mobile 一起使用。它只是另一个无法在 jQuery mobile 上正常工作的插件。富表 http://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/不知道如何处理 jQuery Mobile 页面切换。
使其工作的唯一方法是每次访问该页面时动态创建整个表。在任何其他情况下富表 http://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/将不起作用,因为页面已经存在并具有增强的表标记。这就是为什么每个 jQuery Mobile 小部件都有一个带有刷新属性的函数。
这是一个工作示例:http://jsfiddle.net/Gajotres/PjmEL/ http://jsfiddle.net/Gajotres/PjmEL/
最后一件事,如果这对您来说不是一个好的解决方案,您应该切换到 jQuery Mobile 实现动态表 http://view.jquerymobile.com/1.3.0/docs/widgets/table-column-toggle/.
$(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(){
});