Search code examples
javascripthtmlcsslistjs

How to use "next" and "previous" button instead of numbers in list.js pagination?


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>

Solution

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