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

4 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. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    Isoft Innovations Facebook

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

    ReplyDelete
  4. All the latest updates from the Python Automationminds team. Python Automationminds lets you program in Python, in your browser. No need to install any software, just start coding straight away. There's a fully-functional web-based console and a programmer's text-editor
    Phyton training in Chennai

    ReplyDelete

C# program Selection Sorting

Selection sort is a straightforward sorting algorithm. This algorithm search for the smallest number in the elements array and then swap i...