I've been working on a simple pager function but it's incredibly
lengthy and I can imagine that it should be possible to do this much,
much more simpler and shorter. So I decided to post it up here and see
if anyone could give me some pointers. Thanks.

function pageMe(which, page, pager) {

        // get vars
        var those = "table."+which+" tbody tr";
        var show = 10;
        var total = Math.ceil(those.length / show);
        var hideLs = page * show; // hide everything below this value
        var hideLs2 = page * show - 1;
        var hideEqGt = ( page + 1 ) * show; // hide everything equal to and
above this value
        var pageShow = page + 1;

        // get selectors
        var first = those+":lt("+hideLs+")";
        var second = those+":gt("+hideEqGt+")";
        var third = those+":eq("+hideEqGt+")";
        var fourth = those+":gt("+hideLs2+"):lt("+hideEqGt+")";

        // show the correct rows and hide all other rows
        $(fourth).show();
        $(first).hide();
        $(second).hide();
        $(third).hide();

        // build the pager
        var pagerHTML = "<span id='pagerBack'>Vorige</span> <span
id='pagerPage'>"+pageShow+"/"+total+"</span> <span
id='pagerNext'>Volgende</span> ("+show+" rijen per pagina)";
        $("#"+pager).empty().append(pagerHTML);

        // actions
        $("#pagerBack").click(function() {
                if((page - 1) > -1) {
                        page -= 1;
                        var hideLs = page * show; // hide everything below this 
value
                        var hideLs2 = page * show - 1;
                        var hideEqGt = ( page + 1 ) * show; // hide everything 
equal to and
above this value
                        var pageShow = page + 1;

                        // get selectors
                        var first = those+":lt("+hideLs+")";
                        var second = those+":gt("+hideEqGt+")";
                        var third = those+":eq("+hideEqGt+")";
                        var fourth = those+":gt("+hideLs2+"):lt("+hideEqGt+")";

                        // show the correct rows and hide all other rows
                        $(fourth).show();
                        $(first).hide();
                        $(second).hide();
                        $(third).hide();

                        // adjust page counter
                        $("#pagerPage").empty().append(pageShow+"/"+total);
                }
        });
        $("#pagerNext").click(function() {
                if((page + 1) < total) {
                        page += 1;
                        var hideLs = page * show; // hide everything below this 
value
                        var hideLs2 = page * show - 1;
                        var hideEqGt = ( page + 1 ) * show; // hide everything 
equal to and
above this value
                        var pageShow = page + 1;

                        // get selectors
                        var first = those+":lt("+hideLs+")";
                        var second = those+":gt("+hideEqGt+")";
                        var third = those+":eq("+hideEqGt+")";
                        var fourth = those+":gt("+hideLs2+"):lt("+hideEqGt+")";

                        // show the correct rows and hide all other rows
                        $(fourth).show();
                        $(first).hide();
                        $(second).hide();
                        $(third).hide();

                        // adjust page counter
                        $("#pagerPage").empty().append(pageShow+"/"+total);
                }
        });

}

HTML example:

<table class="pageMe">
  <thead>
  <tr>
    <th></th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  n-rows
  </tbody>
</table>

Reply via email to