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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With