Question

我需要jQuery Mobile Foo 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：

$("#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未正确应用。

截图：

enter image description here

我当时面临的问题包括：

显示隐藏字段。（表示不适用Footable）：在设备中更改方向两次后，此问题得到解决。
第一个字段不再包含“数据展开”按钮（不应用“足迹”）：

我认为问题是因为我删除了旧行并添加了新行。我试过没有给删除电话。那时，旧行正在正确显示。新增的字段存在问题，如屏幕截图所示。

有人可以帮我这个吗？

P.S：我在android webview中呈现这个。同样的问题也在浏览器中重现。

Answer 1

Foo table 是作为jQuery插件创建的，因此从未打算与jQuery Mobile一起使用。它只是另一个插件无法正常使用jQuery mobile。 Foo table 不知道如何处理jQuery Mobile页面切换。

只有在每次访问该页面时动态创建整个表格，才能使其正常工作。在任何其他情况下， Foo table 将无效，因为页面已经存在增强的表格标记。这就是为什么每个jQuery Mobile小部件都有一个带刷新属性的函数。

以下是一个有效的例子：http://jsfiddle.net/Gajotres/PjmEL/

最后一点，如果这对您来说不是一个好的解决方案，您应该切换到 dynamic table 的jQuery Mobile实现。

$(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(){       

});

Answer 2

我在我的网络应用程序中遇到了同样的问题我在回调的datatables.net中使用了这个问题我添加了footable的重绘功能，它的工作非常好。

$('table').trigger('footable_redraw');

Answer 3

＆＃39; Footable＆＃39;适用于jQuery Mobile＆＃39;。我将用我的代码片段解释它的用法。

足部初始化，

function initFootable() {
    $(function () {
        $('.footable').footable({ //.footable is my class for table
            breakpoints: {
                phone: 480, //Breakpoint width for phones
                tablet: 1024 //Breakpoint width for tablets
            }
        });
    });
}

我正在使用jQuery AJAX调用来获取新的表数据并使用模板方法将它们添加到表中。我使用handlebars.js进行模板化。（请记住，这种模板方法不是强制性的。您可以使用自己的方法将新行附加到表中。）

因此，在将新数据更新到表后，需要触发footable以进行重新初始化。这是代码片段，

function updateFootable() {
    var paramTable = $('.footable');
    paramTable.footable();
    paramTable.trigger('footable_initialize'); //Reinitialize
    paramTable.trigger('footable_redraw'); //Redraw the table
    paramTable.trigger('footable_resize'); //Resize the table
}

此处的所有触发器都不是必需的。根据您重新初始化/重新绘制/调整大小的问题，检查并确认调用哪个触发器就足够了。

就是这样，你现在在使用jQuery Mobile的footable时遇到了任何问题。

重要事项：但是，在调用updateFootable（）时必须小心，如果包含该表的div或包含该表的页面被隐藏，则表格不会被响应地调整大小。在调用更新时，必须确保表可见。

链接：

以下是可填充触发器的文档 - http://fooplugins.com/footable/demos/triggers.htm#docs

确保通过可填写的文档 - http://fooplugins.com/footable-demos/

添加动态数据时在footable问题

3 个答案: