OneSimpleTablePaging: Doing Client-Side Table Pagination Easily

by Chun Lin, posted in CSS, Experience, JavaScript, Product

Motivation

Few days ago I was finding a solution for client-side HTML table pagination then I reached this page where I found a rather simple JS table pagination done by Ryan Zielke: http://neoalchemy.org/tablePagination.html

I like his solution very much because it does not require a lot of random CSS and JS files. In order to have the table pagination working in my web page, I just need to include one JS file and four images for the buttons. That’s all.

Few days after that, I started to think if there are ways to simplify his code and also to avoid using any image file. I would like to see if it’s possible that the table pagination can be done with just very simple and easy to understand JS code.

Mission Start!

After spending one day in Alumni Service Centre, NUS, I finally finished the first version of the project. I name it OneSimpleTablePaging: http://one-simple-table-paging.googlecode.com.

It now becomes my another open-source personal project after Google Docs Notifier and OneSync.

In my version, user can only customize the number of rows per page and the position of the pagination bar. This is to keep the code simple. So, if the user is okay with the default settings, after include the jQuery libraries and the OneSimpleTablePaging JS file to his/her web pages, he/she can actually just apply the method oneSimpleTablePagination() with empty array as parameter to existing tables to get the table pagination, for example

$(‘#main-table’).oneSimpleTablePagination({});

Yup, so now everything is so easy and straightforward. =)

Mission Clear

The following screenshot shows the look-and-feel of the table pagination handled by OneSimpleTablePaging.

OneSimpleTablePaging In Action
OneSimpleTablePaging In Action

By the way, the table showed in the screenshot is a collection of my (favourite) watched anime. =P

Yup, now you can visit the project homepage of OneSimpleTablePaging hosted on Google Project Hosting to download the source code and then play with it. =)

Edit (22 Oct 2014)

OneSimpleTablePaging is now on GitHub!
OneSimpleTablePaging is now on GitHub: https://github.com/goh-chunlin/one-simple-table-paging!

23 thoughts on “OneSimpleTablePaging: Doing Client-Side Table Pagination Easily”

  1. it doesn’t seem to work… I don’t know what $.prototype.extend is supposed to do, as far as i know plugins begin with (function($) {

    Reply

    1. It was my fault, I put the initialization code before loading the js file… now it’s working, however I found that with firebug I get this error in the console: TypeError: $(table)[tblLocation]().find(currPageId).on is not a function
      oneSimpleTablePaging-1.0.js
      Line 114

      Do you know how to fix this?
      Thanks

      Reply

      1. Is it because you are using an older version where .on() is not supported? I encountered this problem also when I was using an older version of jQuery. The error message is no longer there after I downloaded the jQuery 1.7.1.

        Yup, so maybe you can try getting a newer version of jQuery library. =)

      2. Yes you were right! Changed to latest version of jquery, now everything is working nicely.

        I have another question though, could I use the plugin in case there are more than 1 table on the same page? Because in the code I see we have a hardcoded id for the pagination div “<div id='tablePagination' .. and I think it would create conflicts if generated multiple times.

      3. Actually it is possible to have more than one table on the same page. In fact, “HTML renderers are very forgiving when it comes to HTML rendering they permit duplicate IDs.”, as discussed on http://goo.gl/RSYe3.

        However, when I try to access the tables programatically, the second table is always not accessible using .getElementByID(). So, I should modify the codes to avoid this problem.

        Thanks for pointing that out! =D

  3. I love this thing. Thank you. However, I am having an issue with it being served by IIS 7.5 and even IE 11 ignoring it. (Firefox and Chrome work fine, so the work around is to not use IE.) I wondered if you’d heard of it happening before me.

    Reply

    1. Thanks, trdunsworth!

      Since Firefox and Chrome work fine, so I guess it shouldn’t be caused by IIS. Instead, it should be the client side issue. So, I have created a simple testing web page: https://db.tt/6DUQxQzv

      It works fine in my IE 11 though. Could I have a screenshot or other details (is there any error shown in F12 Developer Tool?) from your side so that I can investigate more on this problem?

      Best regards,
      Chun Lin

      Reply

      1. Thank you for getting back to me. I found the issue by accident. It isn’t IIS, it was a setting in IE for Compatibility View. Our admins set it to compatibility view for Intranet pages by default. I removed the tick from the box and it works brilliantly, as it should! Thanks for following up with me and trying to help me with it.

  5. I have another question….. Have you put anything in the code for sticky headers in the pagination and I just missed it when I deployed it?

    It still works fantastic for me.

    Reply

    1. Hi trdunsworth,

      Ya, sure.

      Recently I have been quite busy with work, so I don’t really have time to look at my personal project. However, ya, this is a good idea. I will work on during weekends. =)

      Regards,
      Chun Lin

      Reply

  7. Is it possible to specify a page number of the paginated table for initial display, e.g. display page 3, instead of page 1 ?
    Thanks

    Reply

    1. Greetings,

      Yes, it is possible. What you need to do is just adding one line of code

      resetCurrentPage(3); // 3 is the number of the page you want

      after

      $(table)[tblLocation]().find(currPageId).on(‘change’, function (e) {
      resetCurrentPage(this.value);
      });

      in oneSimpleTablePaging-1.0.js.

      Regards,
      Chun Lin

      Reply

      1. Thanks Chun Lin.

        Before reading your reply I have done the following. I added a new property initialPageNumber in userConfigurations / defaults and initialize the variable currPageNumber to defaults.initialPageNumber instead of 1:

        var defaults = {
        initialPageNumber : 1, // added
        rowsPerPage : 10,
        topNav : false
        };

        // var currPageNumber = 1;
        var currPageNumber = defaults.initialPageNumber;

        Regards

  8. Pingback: OneSimpleTablePaging 2.0: Now with Floating Table Header! | cuteprogramming

Leave a reply to driv3r Cancel reply