Question

我正在尝试在.net平台中动态地将数据加载到表中，该表填充了加载窗口的所有数据（没有足迹分页）。但是当我尝试调整窗口大小时，会出现分页。

请帮我在不调整窗口大小的情况下触发加载分页

来自外部js文件的数据绑定

function bindUserDetailsData(data) {
            var tabledata = "";       
if (chk == 0) {
    for (var i = 0; i < data.length; i++) {
        tablerows = $('<tr/>');
        tabledata = data[i];
        var uId = tabledata.UserId;
        var empId = tabledata.EmployeeId;
        var empName = tabledata.EmployeeName;
        var empCompany = tabledata.CompanyCode;
        var empVertical = tabledata.VerticalId;
        var empRole = tabledata.RoleNameId;
        var empCountry = tabledata.CountryId;
        tablerows.append("<td  style='display:none' id='UserId'>" + tabledata.UserId + "</td>");            
        tablerows.append("<td name='EmployeeNumber'>" + tabledata.EmployeeId + "</td>");
        tablerows.append("<td>" + tabledata.EmployeeName + "</td>");
        tablerows.append("<td>" + tabledata.CompanyCode + "</td>");
        tablerows.append("<td  style='display:none'>" + tabledata.VerticalId + "</td>");
        tablerows.append("<td>" + tabledata.VerticalName + "</td>");
        tablerows.append("<td style='display:none'>" + tabledata.CountryId + "</td>");
        tablerows.append("<td>" + tabledata.Country + "</td>");
        tablerows.append("<td style='display:none'>" + tabledata.RoleNameId + "</td>");
        tablerows.append("<td>" + tabledata.RoleNameValue + "</td>");
        tablerows.append("<td  name='pendingRoleId' style='display:none'>" + tabledata.PendingRoleId + "</td>");
        tablerows.append("<td>" + tabledata.PendingRoleName + "</td>");
        $("<td/>").html('<input type="checkbox" name="chkbox" id = "chkId-' + i + '" />').appendTo(tablerows);
        $("<td/>").html('<input type="Button" value="Edit" onclick="EditData(' + uId + ',' + empId + ',' + empVertical + ',' + empRole + ',' + empCountry + ',\'' + empName + '\',\'' + empCompany + '\');"" />'+
            '<input type="Button" value="Delete" onclick="DeleteData(' + uId + ',' + empId + ',' + empVertical + ',' + empRole + ',' + empCountry + ',\'' + empName + '\',\'' + empCompany + '\');"" />').appendTo(tablerows);
        $('#AdminUserDeatilsTable').append(tablerows);}}
$('#rights').show(data);}

HTML内容

  <table id="AdminUserDeatilsTable" class="footable table" data-page-size="10" data-page-navigation=".pagination"
                    > <tr class="headrow">  
                    <th style="display:none">User Id</th>
                    <th>Emp Id</th>  
                    <th>Emp Name</th>
                    <th>Company Code</th>
                    <th style="display:none">Vertical Id</th>
                    <th>Vertical</th> 
                    <th style="display:none">Country Id</th>
                    <th>Country</th>   
                    <th style="display:none">Role Id</th>                                                                     
                    <th>Active Role Name</th>                                                                        
                    <th style="display:none">Pending Role Id</th>                                                                     
                    <th>Pending Role Name</th>
                    <th>Select</th>                                                                     
                    <th>Action</th>
                </tr>
 <tfoot class="hide-if-no-paging">
    <tr>
        <td colspan="10">
            <div class="paging">
                <ul class="pagination pagination-centered"></ul>
            </div>
        </td>
    </tr>
</tfoot>
                </table>

Answer 1

您的表格很可能没有以正确的状态加载，因为您的标记与所需的表单不匹配。 Footable对您的格式要求很高。你需要它更像这样：

<table class="footable" data-page-size="10" data-page-navigation=".pagination">
     <thead>
           <tr>
               <th>Header 1</th>
               ...
           </tr>
     </thead>
     <tbody>
           <tr>
               <td>Cell 1</td>
               ...
           </tr>
     </tbody>
     <tfoot class="hide-if-no-paging">
           <tr>
               <td colspan="Number of Columns">
                   <div class="pagination pagination-centered"></div>
               </td>
           </tr>
     </tfoot>
</tbody>

您还需要确保直接添加到标记的任何内容都是在桌面上初始化footable插件之前完成的。否则，您需要通过Footable API添加行，或者调用$（'＃TableId'）。data（'footable'）。redraw（）;当你完成添加行时。

Answer 2

您需要使用内置的appendRow方法来重绘表格并更新分页。只需通过jQuery附加数据就可以跳过这个。

以下方法应解决您的问题。

// assign the footable variable
$footable = $('#AdminUserDeatilsTable').data('footable');

// create one row that will be appended
var row = "<tr><td>" + tabledata.EmployeeName + "</td>"+
          "<td>" + tabledata.CompanyCode + "</td>"+
          "<td>...</td></tr>";

// use our footable and appendRow
$footable.appendRow(row);

仅在窗口调整大小时触发了footable分页

2 个答案: