I have a table with many rows. Therefore I decided to use list.js
(pagination). However I don't want numbers as pages but a next
and previous
button which I can style individually (or let bootstrap to the job).
<ul class="pager">
<li>
<a class="" href="#">Previous</a>
</li>
<li>
<a class="" href="#">Next</a>
</li>
</ul>
var list = new List('item-table', {
valueNames: ['item'],
page: 10,
plugins: [ListPagination({})]
});
Is this possible with the library (I haven't found anything useful in the documentation) or do I have to use something else?
I tried the solution from roll. I get an error now saying Cannot read property 'childNodes' of undefined
. This error disappers when I add <ul class="pagination"></ul>
. However when trying to access the show method of the list I get an error again: Cannot read property 'show' of undefined
New JS-code
$(document).ready(function() {
//var options = {
// valueNames: ['einheit'],
// page: 13,
// plugins: [ListPagination({})]
//}
var list = new List('item-table', {
valueNames: ['item'],
page: 10,
plugins: [ListPagination({})]
});
var i = 1;
$('.next').on('click', function () {
console.log("next");
i++;
list.show(i, 10);
});
$('.prev').on('click', function () {
console.log("prev");
i--;
list.show(i, 10);
});
});
HTML Code
<div id="item-table">
<table class="table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody class="list">
<tr class="item">
</tr>
<!-- loads of items here -->
</tbody>
</table>
<ul class="pager">
<li class="next">
<a href="#">Next</a>
</li>
<li class="prev">
<a href="#">Previous</a>
</li>
</ul>
</div>
Shure. Reading the documentation you just have to create your buttons and with jquery do the trick
http://www.listjs.com/docs/list-api
var i = 1;
$('.next').on('click', function(){
i++;
listObj.show(i, 3);
})
$('.prev').on('click', function(){
i--;
listObj.show(i, 3);
})
Let me know if it works.