Goal

Many of the times we have to give the paging solutions with JQuery. I have created a small generic script that will allow you to apply paging on html table very quickly. Just a few settings and script will manage the paging(Note:- Right now the script will apply one one table on a page).

Settings

Table ID : Apply an ID to the table with prefix "rpt". In our case we have used "rptPagingTable".
Paging Items : All the rows which are going to be shown on the basis of page. Apply a custom tag to the row(tag="item").
Next/Previous : The paging box will have a tag(tag="paging"). There are seperate tags assigned to the button Next and Previous. For Previous it is (tag="pre") and for Next it is (tag="next").

Solution

<html>
<head>
    <style type="text/css">
        body{font-family:Calibri,Verdana,Arial,Times New Roman;}
        .datagrid{border: 1px solid #808080;}
        .datagrid td{border: 1px solid #efefef;border-collapse: none;padding: 5px;}
        .header{background-color: #808080;color: #fff;text-align: center;font-size: 20px;}
        .itemtemplate{background-color: #fff;}
        .alternatingitemtemplate{background-color: #efefdf;}
        .footer{background-color: #808080;color: #fff;font-size: 15px;}
        .pager{background-color: #CED3D6;color: #000;font-size: 15px;text-align: center;}
        .pager a{color: #0877BD;}
        .pre{float: left;}
        .next{float: right;}
    </style>
    <script>!window.jQuery && document.write('<script src="http://code.jquery.com/jquery-1.4.2.min.js"><\/script>');</script>
    <script language="javascript" type="text/javascript">
        //CODE WHICH WILL HELP IN PAGING

        //Variable for paging
        var _currentPage = 1;
        var _pageSize = 0;
        var _totalPages = 1;

        $(document).ready(function () {

            //Setting the page size
            _pageSize = $("table[id*='rpt']").attr("pagesize");

            //Total Item
            var _trItem = $("tr[tag='item']");
            var _pager = $("tr[tag='paging']");

            //Calculate the page size
            _totalPages = parseInt($(_trItem).length / _pageSize) + ($(_trItem).length % _pageSize > 0 ? 1 : 0);

            //Hide the pager if the items are less than 13
            if ($(_trItem).length > _pageSize) {
                $(_pager).show();
            }
            else {
                $(_pager).hide();
            }

            //Page One Settings
            Paging();

            //Previous
            $("a[tag='pre']").click(function () {

                if (_currentPage == 1) {
                    return;
                }

                //Reduce the page index
                _currentPage = _currentPage - 1;

                //Paging
                Paging();
            });

            //Next
            $("a[tag='next']").click(function () {

                if (_currentPage == _totalPages) {
                    return;
                }

                //Increase the page index
                _currentPage = _currentPage + 1;

                //Paging
                Paging();
            });

        });

        //Shows/Hides the tr
        function Paging() {

            //Get the correct start index and end index
            var _endIndex = (_currentPage * _pageSize);
            var _startIndex = (_endIndex - _pageSize) + 1;

            //Hide all first
            $("tr[tag='item']").hide();

            //Show correct items
            $("tr[tag='item']").each(function (i) {
                var x = i + 1;
                if (x >= _startIndex && x <= _endIndex) {
                    $(this).show();
                }
            });
        }

    </script>
</head>
<body>
    <table id="rptPagingTable" cellpadding="0" cellspacing="0" border="0" class="datagrid"
        style="width: 700px" align="center" calculativegrid="PM" pagesize="5">
        <tr class="header"><td>No.</td><td style="width: 100%;">Instant Paging</td></tr>
        <tr tag="item" class='itemtemplate'><td>1</td><td>Ahmedabad</td></tr>
        <tr tag="item" class='alternatingitemtemplate'><td>2</td><td>Mumbai</td></tr>
        <tr tag="item" class='itemtemplate'><td>3</td><td>Delhi</td></tr>
        <tr tag="item" class='alternatingitemtemplate'><td>4</td><td>Calcutta</td></tr>
        <tr tag="item" class='itemtemplate'><td>5</td><td>Chicago</td></tr>
        <tr tag="item" class='alternatingitemtemplate'><td>6</td><td>New York</td></tr>
        <tr tag="item" class='itemtemplate'><td>7</td><td>New Jersy</td></tr>
        <tr tag="item" class='alternatingitemtemplate'><td>8</td><td>Bangalore</td></tr>
        <tr tag="item" class='itemtemplate'><td>9</td><td>Hyderabad</td></tr>
        <tr tag="item" class='alternatingitemtemplate'><td>10</td><td>Noida</td></tr>
        <tr tag="item" class='itemtemplate'><td>11</td><td>Mangalore</td></tr>
        <tr tag="item" class='alternatingitemtemplate'><td>12</td><td>Pune</td></tr>
        <tr tag="paging" class="pager">
            <td colspan="6">
                <a tag="pre" class="pre" href="javascript:void(0);"><< Prev</a>
                <a tag="next" class="next" href="javascript:void(0);">Next >></a>
            </td>
        </tr>
    </table>   
</body>
</html>

Display

Please let me know if this was helpful.

Maulik Dhorajia

Tuesday, September 4, 2012

JQuery : Quick paging solution with JQuery

Goal

Settings

Solution

Display

1 comment: