Click here to Skip to main content
15,892,059 members
Search within:


Pagination in HTML table
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
HTML
table
paging
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
Add a Solution
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>
 
Share this answer
 
Posted
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/
Add a Solution

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

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Create Pagination for HTML table in JSP
Pagination for a div table
How to apply pagination on html table in jquery.
how to make Client-side HTML table pagination with JavaScript ?
Table Pagination in asp.net mvc 2
pagination using jquery
Jquery pagination is not working
Pagination and Data Passing
Problem PHP pagination..
How to allow table have pagination to display default value 10 rows ?

Advertise
Privacy
Cookies
Terms of Use
Last Updated 23 Jul 2016
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web02 2.8:2024-04-02:1

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