Why the pagination of footable is not working?

Question

I'm trying to implement FooTable-2 in my project, but for some reason I can't get the pagination working.

I'm following THIS tutorial and here is what I have so far as a table code:

<div id="mainContent">
   <div id="allTrackersDiv" style="display: none;">
      <label><b>Active Trackers</b></label>
      <table class="activeTrackersTable" id="allTrackersTable" 
         data-page-navigation=".pagination">
         <thead>
            <tr>
               <th> ID </th>
               <th> col 1 </th>
               <th> col 2 </th>
               <th> col 3 </th>
            </tr>
         </thead>
         <tbody data-bind="foreach: trackersObjArray">
            <tr data-bind="click: test">
               <td><span data-bind="text: tId"></span></td>
               <td><span data-bind="text: tname"></span></td>
               <td><span data-bind="text: pname"></span></td>
               <td><span data-bind="text: tcreate"></span></td>
            </tr>
         </tbody>
         <tfoot>
            <tr>
               <td colspan="4">
                  <div class="pagination"></div>
               </td>
            </tr>
         </tfoot>
      </table>
   </div>
</div>

The problem is that the paging is not working. I have 22 records in my table and it is supposed to start paging after the 10th record

Here is how it looks:

Cropped image

What am I missing here? At my point of view everything looks pretty fine. What am I missing, I really can't understand my mistake.

You need to post your JavaScript too. And a fiddle would also help. — j08691, Jun 18 '14 at 14:12
The headline "Why the paging is not working?" does not describe your issue. Whenever posting, make sure you try to explain your problem in a few words... just saying. — faerin, Jun 18 '14 at 14:18
Did you try adding `data-page-size="10"` explicitly? In case there is an issue with default? — MysticMagicϡ, Jun 18 '14 at 14:29
Are you adding data to table dynamically? [this might be issue](https://github.com/bradvin/FooTable/issues/145) — MysticMagicϡ, Jun 18 '14 at 14:33
@LittleSuzy It worked! Would you place a quick answer, so I can accept it? — Slim, Jun 18 '14 at 14:36

score 3 · Accepted Answer · edited May 23 '17 at 12:09

3

You can try mentioning

data-page-size="10"

explicitly.

And if that doesn't work, may be issue is due to dynamic data being added to footable.

Use

$('#myTable').append(html).trigger('footable_redraw');

So that footable will be redrawed and size limit will be applied.

Reference links: Footable data page size not respected and Other issues due to dynamic data in footable

edited May 23 '17 at 12:09

Community

1
1

answered Jun 18 '14 at 14:41

MysticMagicϡ

28,593
16
73
124

If append(html) does not work try (this.html) so the code will now be: $('#myTable').append(this.html).trigger('footable_redraw'); – Hilario Goes Mar 28 '17 at 14:58

Why the pagination of footable is not working?

1 Answers1