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

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...