Why is Footable pagination not rendering properly?

Question

I'm trying to implement Footable, a JQuery plugin used to make tables responsive. There is an add-on for Footable to add pagination. [Demo]

And (http://fooplugins.com/footable/demos/paging.htm) for using the pagination add-on. I tried following this demo but my pagination came up as a vertical un-ordered list. The buttons are functional but unsightly. Here is a link images which i can not post here because my repuation is not high enough.

Here is my code for the table:

<table class="table table-hover" ng-show='form.length>0' data-page-navigation=".pagination">
    <thead>
        <th ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'" >{{formAttr.attributes.name}}<br/>({{formAttr.type}})</th>
        <th>Submission Time</th>
    </thead>
    <tbody>
        <tr ng-repeat="(key, response) in formResponses">
            <td ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'">{{$parent.response.results[formAttr.att_id]}}</td>
            <td>{{response.submission_time}}</td>
        </tr>
    </tbody>
    <tfoot class="">
        <tr>
            <td colspan="5">
                <div class="pagination pagination-centered"></div>
            </td>
        </tr>
    </tfoot>
</table>

Did you include **footable.core.css** ? – Julien Jun 29 '14 at 08:41 — Julien, Jun 29 '14 at 08:41
@Julien I did include footable.core.css – Sonicdeadlock Jun 29 '14 at 16:05 — Sonicdeadlock, Jun 29 '14 at 16:05

score 11 · Accepted Answer · answered Jun 30 '14 at 20:39

Your footer should look something like this:

<tfoot class="hide-if-no-paging">
  <tr>
    <td colspan="5" class="text-center">
        <ul class="pagination">
        </ul>
    </td>
  </tr>
</tfoot>

You can tell, that's different that what it says in the demo. This link showed me the difference https://github.com/bradvin/FooTable/issues/136.

Here's a plunk to demonstrate the issue: http://plnkr.co/edit/8Yyk8NN8rsqdXtrvJDOM

score 3 · Answer 2 · edited Jan 12 '16 at 13:26

3

You need to add both attribute for pagination:

data-page-navigation=".pagination" data-page-size="2" into table tag

edited Jan 12 '16 at 13:26

ElGavilan

6,610
16
27
36

answered Jan 12 '16 at 11:19

Apps Tawale

665
7
7

Don't use a CSS class for table-to-pagination relationships. See answer below... – barrypicker Jul 06 '17 at 20:24

barrypicker · Answer 3 · 2017-07-06T21:11:21.047

(If not placing the pagination in the table footer) Don't use a CSS class for table-to-pagination relationships. Use CSS ID instead.

Consider the following...

BAD - Example using CSS class to relate pagination object to table:

<table id="table1" class="footable" data-page-navigation=".pagination" data-page-size="10">
    <thead>
        <th>Some Title</th>
        <th>Some other Title</th>
    </thead>
    <tbody>
        <tr>
            <td>some data</td>
            <td>some more data</td>
        </tr>
    </tbody>
</table>
<div class="pagination hide-if-no-paging"></div>

<table id="table2" class="footable" data-page-navigation=".pagination" data-page-size="10">
    <thead>
        <th>Some Title</th>
        <th>Some other Title</th>
    </thead>
    <tbody>
        <tr>
            <td>some data</td>
            <td>some more data</td>
        </tr>
    </tbody>
</table>
<div class="pagination hide-if-no-paging"></div>

The footable javascript code will see two pagination objects. Which will be used by table1 and which will be used by table2 is not deterministic. This throws the footable javascript into a tizzy.

Rather than use CSS classes, be more specific by using a CSS ID instead.

GOOD - Example using CSS ID to relate pagination object to table:

<table id="table1" class="footable" data-page-navigation="#pagination1" data-page-size="10">
    <thead>
        <th>Some Title</th>
        <th>Some other Title</th>
    </thead>
    <tbody>
        <tr>
            <td>some data</td>
            <td>some more data</td>
        </tr>
    </tbody>
</table>
<div id="pagination1" class="pagination hide-if-no-paging"></div>

<table id="table2" class="footable" data-page-navigation="#pagination2" data-page-size="10">
    <thead>
        <th>Some Title</th>
        <th>Some other Title</th>
    </thead>
    <tbody>
        <tr>
            <td>some data</td>
            <td>some more data</td>
        </tr>
    </tbody>
</table>
<div id="pagination2" class="pagination hide-if-no-paging"></div>

Javascript Example:

$(document).ready(function () {
    $(".footable").footable();
});

Why is Footable pagination not rendering properly?

3 Answers3