footable pagination triggered only on window resize

Question

I am trying to load data into tables dynamically in .net platform, the table populated with all data on loading the window (No footable pagination).But when i am trying to resize the window the pagination get appears.

please help me to trigger the pagination on loading without resizing the window

Data binding from external js file

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 content

  <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>

feel free to ask for more details – shaheer Mar 07 '15 at 06:39 — shaheer, Mar 07 '15 at 06:39

score 0 · Answer 1 · answered Mar 10 '15 at 20:53

Your table is most likely not loading in the correct state because your markup doesn't match the required form. Footable is pretty demanding on your format. You need it to be more like this:

<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>

You also need to make sure that any content you're adding to the markup directly is done before the footable plugin is initialized on the table. Otherwise, you need to either add the rows through the Footable API, or call $('#TableId').data('footable').redraw(); when you're done adding rows.

score 0 · Answer 2 · answered Apr 09 '16 at 18:05

You need to use the built in appendRow method for this which redraws the table and updates pagination. Simply appending data via jQuery skips this.

The following approach should fix your issue.

// 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 pagination triggered only on window resize

2 Answers2