You must Sign In to post a response.
  • Category: JQuery

    Error in paging using jquery

    Hi,
    in my application iam using paging by jquery.
    eg i have 10 records and want to display 4 records at a time.
    paging has forward and backward buttons.
    following is the code.
    $(document).ready(function () {
    var rows = 10;
    var no_rec_per_page = 3;
    var modtest = rows % no_rec_per_page;
    var no_pages = Math.ceil(rows / no_rec_per_page);
    $('#pages').empty();
    $('#pages').show();
    var cnt = 10;
    var $rcount = "There are " + cnt + " Records";
    var disp = $('<div id="dp"></div>');
    $(disp).html($rcount).css('color', 'Green');
    var $pagenumbers = $('<div id="pages"></div>');
    var html = '<a id="prev" title="previous" href=\"#\"> <<</a>';
    var k = Math.ceil(cnt / 4);
    console.log(k);
    for (i = 0; i <= k; i++) {
    html = html + '<a href="#" id="' + (i + 1) + '" class="page">' + (i + 1) + '</a>';
    }

    html = html + '<a title="Next" id="next" href=\"#\"> >></a>';
    $(html).appendTo($pagenumbers);
    $pagenumbers.insertAfter('#st');
    $(disp).insertAfter($pagenumbers);
    i = 0;
    $('#next').click(function () {

    $('#pages').empty();


    k = k + 4;
    i = i + 4;
    var disp = $('<div id="dp"></div>');
    var $pagenumbers = $('<div id="pages"></div>');
    var html = '<a id="prev" title="previous" href=\"#\"> <<</a>';
    for (i; i <= k; i++) {
    html = html + '<a href="#" id="' + (i + 1) + '" class="page">' + (i + 1) + '</a>';

    }

    html = html + '<a title="Next" id="next" href=\"#\"> >></a>';
    $(html).appendTo($pagenumbers);
    $pagenumbers.insertAfter('#st');
    $(disp).insertAfter($pagenumbers);



    });
    $('#prev').click(function () {
    console.log(i);
    $('#pages').empty();
    var disp = $('<div id="dp"></div>');
    var $pagenumbers = $('<div id="pages"></div>');
    var html = '<a id="prev" title="previous" href=\"#\"> <<</a>';
    i = i - 3;
    k = k - 3;
    for (i; i < k; i++) {
    html = html + '<a href="#" id="' + (i + 1) + '" class="page">' + (i + 1) + '</a>';
    }

    html = html + '<a title="Next" id="next" href=\"#\"> >></a>';
    $(html).appendTo($pagenumbers);
    $pagenumbers.insertAfter('body');
    $(disp).insertAfter($pagenumbers);
    });
    });
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div id="st"></div>
    </form>
    </body>
    </html>
    -----------------------------------------------

    here only forward button is working.but only for one click.
    backward button doesn't display any record .
    plz find this url
    http://jsfiddle.net/klbaiju/mupbnng2/2/

    how to solve this

    Regards
    Baiju
  • #760220
    Hello Baiju,

    Refer the below code for clientside paging in JQuery :

    <script>
    $(function () {
    var cnt = 4;
    var pre = '<a href="#"><<</a>';
    $("#pages").append(pre);

    for (var i = 0; i < cnt; i++) {
    var num = '<a href="#" id="' + (i + 1) + '" class="page">' + (i + 1) + '</a>';
    $("#pages").append(num);
    }

    var next = '<a href="#">>></a>';
    $("#pages").append(next);
    })
    </script>


    Hope this will help you.

    Regards,
    Nirav Lalan
    DNS Gold Member
    "If you can dream it, you can do it."


  • Sign In to post your comments