|
|
 | |  |
| Main » 2012 » November » 6 » Complete Jquery Pagination
10:01 PM Complete Jquery Pagination |
jQuery Plugin for pagination
maximum time we use server side scripts for making a pagination. for that we have to do some
form posts and and subit data to server or we have to use ajax and we
have to maintain SQl statements by using limit and offsets but why are
we going to a long process and all .so i think it is a so long Procedure
and if the server is busy .then the paging performance is also slow.
so here we are sharing a JQuery Plugin and its Instruction to make a
Client Side pagination for making your page performance faster
first create a php file any of the name
and first Download our Cloudevils.js from our external data server using following link
download Cloudevil's Js
after that add this script in your head section just like
<script src="cloudevils.js"></script>
Note =>> in this example you can put the data from your database but keep some points in your mind
1) make a table having id page_data
2) make all the tr with id of its serial number tike first tr should be tr_1 and second is tr_2 and so on
3) make a p tag just after the table for showing the page links navigation
Now copy n paste following div in your body tag of page
<div id="cloudevils_page">
<p>Set Per Page Data Value: >> <select onchange="set_data_rows(this.value)">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
</select></p>
<!-- make a table having id page_data after that make all the tr with
id of its serial number tike first tr should be tr_1 and second is tr_2
and so on....... -->
<table id="page_data">
<?php
$i=1;
for($i;$i <= 49;$i++)
{
echo '<tr class="page_row" id="tr_'.$i.'"><td>MY Sample
Name '.$i.'</td><td>MY Business
'.$i.'</td></tr>';
}
?>
</table>
<!-- make a p tag for showing the page links navigation -->
<p id="paging_links">
</p>
<script>
var totalrecords= $("#page_data tr.page_row").length;
var page_num=1;
var data_to_retrieve=5;
$(document).ready(function(){
show_data(page_num);
});
function set_data_rows(numrows)
{
data_to_retrieve=numrows;
show_data(1);
}
function show_data(pagenum)
{
if(pagenum <= 1 )
{
var from=1;
var to=data_to_retrieve;
}
else
{
var from = (pagenum*data_to_retrieve)-data_to_retrieve;
var to = pagenum*data_to_retrieve;
}
$("tr").hide();
for(from;from<=to;from++)
{
$("#tr_"+from).show();
}
show_paging();
}
function show_paging()
{
var count_pages=Math.ceil(totalrecords/data_to_retrieve);
var links='';
for(var a=1;a<=count_pages;a++)
{
links += ' <a href="javascript:void();" onclick="show_data('+a+')">'+a+'</a>';
}
$('#paging_links').html(links);
}
</script>
</div>
|
|
Category: Web Development |
Views: 415 |
Added by: admin-priyank
| Rating: 5.0/1 |
| |
 | |  |
|
| Calendar |
 | | « November 2012 » | | Su | Mo | Tu | We | Th | Fr | Sa | | | | | | 1 | 2 | 3 | | 4 | 5 | 6 | 7 | 8 | 9 | 10 | | 11 | 12 | 13 | 14 | 15 | 16 | 17 | | 18 | 19 | 20 | 21 | 22 | 23 | 24 | | 25 | 26 | 27 | 28 | 29 | 30 |
|  |
 |
| Statistics |
|
Total online: 1 Guests: 1 Users: 0 | |
|
|
