Friday, 5 August 2016

Paging in html table using javascript

I demonstrated how to use HTML tables on the client for a very simple client-side paging solution. I have heard from several people who point out the performance problems with large sets of data. I agree. This solution is best for a fairly fixed amount of data.

Step#1:
Include the following css in your page header;




<style type="text/css">
.pg-normal {
color
: #000000;
font-size
: 15px;
cursor
: pointer;
background
: #D0B389;
padding
: 2px 4px 2px 4px; }
.pg-selected {
color
: #fff;
font-size
: 15px;
background
: #000000;
padding
: 2px 4px 2px 4px; }

table
.yui {
font-family
:arial;
border-collapse
:collapse;
border
: solid 3px #7f7f7f;
font-size
:small; }

table
.yui td {
padding
: 5px;
border-right
: solid 1px #7f7f7f; }

table
.yui .even {
background-color
: #EEE8AC; }

table
.yui .odd {
background-color
: #F9FAD0; }

table
.yui th {
border
: 1px solid #7f7f7f;
padding
: 5px;
height
: auto;
background
: #D0B389; }

table
.yui th a {
text-decoration
: none;
text-align
: center;
padding-right
: 20px;
font-weight
:bold;
white-space
:nowrap; }

table
.yui tfoot td {
border-top
: 1px solid #7f7f7f;
background-color
:#E1ECF9; }

table
.yui thead td {
vertical-align
:middle;
background-color
:#E1ECF9;
border
:none; }

table
.yui thead .tableHeader {
font-size
:larger;
font-weight
:bold; }

table
.yui thead .filter {
text-align
:right; }

table
.yui tfoot {
background-color
:#E1ECF9;
text-align
:center; }

table
.yui .tablesorterPager {
padding
: 10px 0 10px 0; }

table
.yui .tablesorterPager span {
padding
: 0 5px 0 5px; }

table
.yui .tablesorterPager input.prev {
width
: auto;
margin-right
: 10px; }

table
.yui .tablesorterPager input.next {
width
: auto;
margin-left
: 10px; }

table
.yui .pagedisplay {
font-size
:10pt; 
width: 30px;
border
: 0px;
background-color
: #E1ECF9;
text-align
:center;
vertical-align
:top; }
</style>

Step#2
Copy & paste the following script  in your page header;
<script type="text/javascript">

function Pager(tableName, itemsPerPage) {

this.tableName tableName;

this
.itemsPerPage itemsPerPage;

this
.currentPage 1;

this
.pages 0;

this
.inited = false;

this
.showRecords = function(from, to) {

var rows = document.getElementById(tableName).rows;// i starts from 1 to skip table header rowfor (var 1i < rows.lengthi++) {

if (i < from || i > to)

rows[i].style.display 'none';

else
rows[i].style.display '';}

}

this.showPage = function(pageNumber) {

if (! this.inited) {

alert("not inited");

return;
}

var oldPageAnchor = document.getElementById('pg'+this.currentPage);oldPageAnchor.className 'pg-normal';

this
.currentPage pageNumber;

var 
newPageAnchor = document.getElementById('pg'+this.currentPage);newPageAnchor.className 'pg-selected';

var 
from (pageNumber - 1) * itemsPerPage + 1;

var 
to from + itemsPerPage - 1;

this
.showRecords(from, to);}

this.prev = function() {

if (this.currentPage > 1)

this.showPage(this.currentPage - 1);}

this.next = function() {

if (this.currentPage < this.pages) {

this.showPage(this.currentPage + 1);}

}

this.init = function() {

var rows = document.getElementById(tableName).rows;

var 
records (rows.length - 1);

this
.pages = Math.ceil(records / itemsPerPage);

this
.inited = true;}

this.showPageNav = function(pagerName, positionId) {

if (! this.inited) {

alert("not inited");

return;
}

var element = document.getElementById(positionId);

var 
pagerHtml '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> ';

for 
(var page 1page <= this.pagespage++)

pagerHtml +'<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> ';pagerHtml +'<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';element.innerHTML pagerHtml;}

}

</script>

Stet#3

Define an ID on the table you want to paging that is "tablepaging" ; place an empty div in the place you want to display the navigation bar. that is "pageNavPosition"; include an initialization script at the bottom of your page. 

<table id="tablepaging" class="yui" align="center">
<thead>
<tr>
                <th>Name </th>
                <th>Collage </th>
                <th>Gender </th>
                <th>percentage </th>            
            </tr>
   <tbody>
            <tr class="even">
                <td>Munesh </td>
                <td>ABC </td>
                <td>M </td>
                <td>80 </td>              
            </tr>
            <tr class="odd">

                <td>Rahul </td>
                <td>PQR </td>
                <td>M </td>
                <td>80 </td>
             
            </tr>
            <tr class="odd">

                <td>Govind </td>
                <td>XYZ </td>
                <td>M </td>
                <td>40 </td>
               
            </tr>
            <tr class="odd">

                <td>Anshuman </td>
                <td>CollageName1 </td>
                <td>M </td>
                <td>80 </td>
                
            </tr>
            <tr class="odd">

                <td>Student1 </td>
                <td>CollageName2 </td>
                <td>M </td>
                <td>50 </td>
            
            </tr>
            <tr class="odd">

                <td>Student2 </td>
                <td>CollageName3 </td>
                <td>F </td>
                <td>60 </td>
               
            </tr>
            <tr class="odd">

                <td>Student3 </td>
                <td>CollageName4 </td>
                <td>F </td>
                <td>70 </td>
               
            </tr>
            <tr class="odd">

                <td>Student4 </td>
                <td>CollageName5 </td>
                <td>M </td>
                <td>80 </td>
                
            </tr>

        </tbody>
</table>
<div id="pageNavPosition" style="padding-top: 20px" align="center">
</div>
<script type="text/javascript"><!--
var pager = new Pager('tablepaging'5);
pager.init();pager.showPageNav('pager''pageNavPosition');
pager.showPage(1);
</script>

Output




Name

Collage

Gender

percentage

Munesh

ABC

M

80

Rahul

PQR

M

50

Govind

XYZ

M

70

Anshuman

AAA

M

60

5 comments:

  1. As we heared more and more tips which enable us for writing for the content. But with this especially how the authoritative really nice. I agree with your 3 point include with more images and videos. It will enable the readers without any confused or any other thing and finally cleared with what we are going to tell.

    Digital Marketing Company in Chennai

    ReplyDelete
  2. Expected and valid points are included in you blog.. I really liked and I got some clear ideas for improve my thoughts from well defined content... keep updating more for us... thanks for shared useful blog..
    PTE Coaching in Chennai

    ReplyDelete
  3. Superb. I really enjoyed very much with this article here. Really it is an amazing article I had ever read. I hope it will help a lot for all. Thank you so much for this amazing posts and please keep update like this excellent article.thank you for sharing such a great blog with us. expecting for your..
    SEO Company in India

    ReplyDelete
  4. wow really superb you had posted one nice information through this. Definitely it will be useful for many people. So please keep update like this.

    HR Consultancy in Bangalore

    ReplyDelete
  5. Wow... Its very information... This blog i harding Found..
    Very Nice your effort is nice.

    ReplyDelete

Paging in html table using javascript

I demonstrated how to use HTML tables on the client for a very simple client-side paging solution. I have heard from several people who p...