jQuery Tablesorter Pager: Jump to Page

This is my first blog in english, so sorry for any spelling errors.

In one of our projects, we use the great jQuery library. A very cool plugin for jQuery is the tablesorter and the extsion to this, the pager. The only disadvantage of the pager plugin is the missing function “Jump To Page”. You can only display the current page and the page count as one string. So i have modified the code of the pager plugin a little, to add this function.

It is a very simple extension, only two existing functions need to be updated. To identify the input-field for the current page and the div for the pagecount, i added two new properties to the settings: cssPageCurrent and cssPageCount. The first function to update is the constructur. Here i connect to the change-event of the input-field and call the moveToPage function. The second function is named updatePageDisplay. It is responsible to update the number in the currentpage-inputfield if you navigate with the next/prev buttons.

Here are the updated functions:

function updatePageDisplay(c, table) {
    var txt = (c.page + 1) + c.seperator + c.totalPages;
    var pd = $(c.cssPageDisplay, c.container)
    if (pd.is("input"))
        pd.val(txt);
    else
        pd.text(txt);

    var pcur = $(c.cssPageCurrent, c.container)
    if (pcur.is("input"))
        pcur.val(c.page + 1);
    else
        pcur.text(c.page + 1);

    var pcount = $(c.cssPageCount, c.container)
    if (pcount.is("input"))
        pccount.val(c.totalPages);
    else
        pcount.text(c.totalPages);

    $(table).trigger("tableSorterPagerUpdatePageDisplay");
}

this.defaults = {
    size: 10,
    offset: 0,
    page: 0,
    totalRows: 0,
    totalPages: 0,
    container: null,
    cssNext: '.next',
    cssPrev: '.prev',
    cssFirst: '.first',
    cssLast: '.last',
    cssPageDisplay: '.pagedisplay',
    cssPageSize: '.pagesize',
    cssPageCount: '.pagecount',
    cssPageCurrent: '.pagecurrent',
    seperator: "/",
    positionFixed: true,
    appender: this.appender
};

this.construct = function (settings) {

    return this.each(function () {

        ...

        $(config.cssPageCurrent, pager).change(function () {
            var c = table.config;
            var p = $(this).val();

            if (p != c.page + 1) {
                p = parseInt(p) - 1;
                if (p < 0 || isNaN(p)) p = 0;
                else if (p > c.totalPages - 1) p = c.totalPages - 1;

                c.page = p;
                moveToPage(table);
            }

            return false;
        });
    });
};

Here you can download the changed scriptfile: jquery.tablesorter.pager.js

And here is how i used it:

<html>
<head>
    <script type="text/javascript">
        $(document).ready(function () {
            ...
            $(".tblSortable").tablesorter();
            $(".tblSortable").tablesorterPager({ container: $("#pager"), positionFixed: false, size: 30 });
            ...
        });
    </script>
</head>
<body>
    ...
    <div id="pager" align="center">
        <input type="text" name="pagecurrent" class="pagecurrent">
        <span> / </span>
        <span class="pagecount">1</span>
    </div>
    ...   
    <table class="tblSortable">
        ...
    </table>      
</body>
</html>

,

  1. #1 von shahashishk am 2011-11-10 - 13:56

    Thanks Dear for helping for this kind of soting and paging configuration

  2. #2 von #2 am 2013-12-09 - 08:40

    Thanks so much this helped me a lot! Danke!

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit deinem WordPress.com-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s

%d Bloggern gefällt das: