1

我正在尝试在.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>
4

2 回答 2

0

您的表格很可能没有以正确的状态加载，因为您的标记与所需的形式不匹配。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 API 添加行，或调用 $('#TableId').data('footable').redraw(); 当你完成添加行时。

于 2015-03-10T20:53:59.100 回答
0

您需要为此使用内置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);
于 2016-04-09T18:05:49.530 回答