Click here to Skip to main content
14,865,447 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
hi

i try to create pager for html table for this i try below code

What I have tried:

HTML
<div id="pageNavPosition"></div>

<script type="text/javascript"><!--
var pager = new Pager('tabledata', 10);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
//--></script


according to this link

http://en.newinstance.it/2006/09/27/client-side-html-table-pagination-with-javascript/

but when i try this there is no pager
Posted
Updated 22-Jul-16 21:30pm
v3
Comments
Karthik_Mahalingam 22-Jul-16 9:21am
   
post your table markup
super_user 23-Jul-16 1:21am
   
i try to create through jquery .. like this .. success: function (result) {
var final = JSON.parse(result.d).response;

console.log(JSON.parse(result.d).response);
$("#tabledata").empty();

if (final.length > 0) {
$("#tabledata").append(
"<tr><th>ID</th><th>Owner</th><th>RegNo</th></tr>");

for (var i = 0; i < final.length; i++) {

if (final[i] !== null) {
$("#tabledata").append("<tbody><tr><td>" +
final[i][0] + "</td> <td>" +
final[i][1] + "</td> <td>" +
final[i][2] + "</td></tr></tbody>");

}
}
$("#tabledata tr:first").addClass('GridviewScrollHeader');
$("#tabledata tr").addClass('GridviewScrollItem');


}

1 solution

try like this

HTML
<!doctype html>
<html lang="en">
<head>
    <script src="paging.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <style type="text/css">
        .pg-normal {
            color: black;
            font-weight: normal;
            text-decoration: none;
            cursor: pointer;
        }

        .pg-selected {
            color: black;
            font-weight: bold;
            text-decoration: underline;
            cursor: pointer;
        }
    </style> 

    <script>

        var pager; // declare the pager variable outside
        $(function () {  
            var final = [[1, 'a', 'a1'], [2, 'b', 'b'], [3, 'c', 'c3'], [4, 'd', '4d'], [5, 'e', '5e']
            , [6, 'f', '6f'], [7, 'g', '7g']]
        $("#tabledata").append( $("<tr><th>ID</th><th>Owner</th><th>RegNo</th></tr>"));

        for (var i = 0; i < final.length; i++) {
            var item = final[i];
             
            var tr = " <tr><td>" + item[0] + "</td> <td>" + item[1] + "</td> <td>" + item[2] + "</td></tr> ";
            $("#tabledata").append(tr);
        } 

        pager = new Pager('tabledata', 3);
        pager.init();
        pager.showPageNav('pager', 'pageNavPosition');
        pager.showPage(1); 
        }); 
    </script>

</head>
<body>
    <table id="tabledata"></table>
    <div id="pageNavPosition"></div> 
</body>
</html>
   
Comments
super_user 23-Jul-16 3:35am
   
check this fiddle.. this does not work ..
https://jsfiddle.net/2oc7gxov/3/
Karthik_Mahalingam 23-Jul-16 4:21am
   
try this

https://jsfiddle.net/karthikjsf/2oc7gxov/4/

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900