Customising this code

Customising this code

Hi everyone,

I decided to use the tutorial over at PacktPub mainly because I didn't need all the features of DataTable and I didn't want to have to spend a lot of time trying to get it styled exactly how i wanted it. 

My problem with this tutorial is the pagination. I dont want it to look like this:

1 2 [3] 4 5

Instead I want it to look like
< [#] >

The [#] will be an input field where the user can enter in a number and it will automatically go to that page. The arrows on either side, they will disable and enable depending on what page its on and how many pages there are. For instance if it was at Page 1, then the < button would have a class of "off". If there were more than 1 pages then the > button would be styled with the class "on". 

I've attached a screenshot of how I may want it to look:

I'm a bit stuck as to how I may achieve this with this code:

  1. $(document).ready(function() {

      $('table.paginated').each(function() {

        var currentPage = 0;

        var numPerPage = 10;

       

        var $table = $(this);

       

        $table.bind('repaginate', function() {

          $table.find('tbody tr').show()

            .lt(currentPage * numPerPage)

              .hide()

            .end()

            .gt((currentPage + 1) * numPerPage - 1)

              .hide()

            .end();

        });

     

        var numRows = $table.find('tbody tr').length;

        var numPages = Math.ceil(numRows / numPerPage);

     

        var $pager = $('<div class="pager"></div>');

        for (var page = 0; page < numPages; page++) {

          $('<span class="page-number">' + (page + 1) + '</span>')

           .bind('click', {'newPage': page}, function(event) {

             currentPage = event.data['newPage'];

             $table.trigger('repaginate');

             $(this).addClass('active').siblings().removeClass('active');

           })

           .appendTo($pager).addClass('clickable');

        }

        $pager.find('span.page-number:first').addClass('active');

        $pager.insertBefore($table);

       

        $table.trigger('repaginate');

      });

    });

Thanks in advanced for your help!

Michael.