Paging controls implemented with JavaScript

With the application of Ajax more and more, often need to load the data in the foreground, which can reduce the time of page loading, but also improve the user's experience, so the actual project requires me to write a JavaScript paging control, for binding table, Implements functionality similar to the DataGrid paging control. The following is the code that calls the JS paging control.

var rows;
var tab = document.getElementById ("table1");//table Object
Total number of Var _total=0;//data
var pager;//paging Object

function Page_Load () {
Pager = new Stowaypager ();
Pager.setpageindex (1);//Current index page
Pager.setpagesize (6);//Set Number of pages
InitData ();
Bindlist (FALSE);
}
function InitData () {
The data returned by//data for Ajax is not described in detail here.
rows = data;
_total = Rows.length;
if (_total = = 0) {
Displaynotfind ();
Return
}
Pager.settotal (_total)//Set total data
}
function Bindlist () {
Displaybinding ()///tips added to increase the friendliness of the interface
var count = Pager.getpageindex () * pager.getpagesize ();
For (I=count-pager.getpagesize (); i<count;i++) {
var tr = Tab.insertrow (tab.rows.length);//New row
var td_id = Tr.insertcell (0);//define ID column
var td_name = Tr.insertcell (1);//define Name column
var td_city = Tr.insertcell (2);//define City column
td_id.innertext=rows[i]["id"];
td_name.innertext=rows[i]["Name"];
td_city.innertext=rows[i]["City"];

}
document.getElementById ("Div_pager"). Innerhtml=pager.bindpager ()//We add a div with an ID of Div_pager to return the generated paging code to the Div_pager
}

The Pagechangedevent method is triggered when the user clicks on the page number, and this method is only valid for pages that contain a JS paging control, and it is easy to change with multiple paging controls.
function Pagechangedevent (i) {
Pager.setpageindex (i);//Set Current page
Bindlist ();
}
This method is primarily to empty the data.
function DeleteRows ()
{
while (tab.rows.length>0) {
Tab.deleterow (0);
}
}

function displaybinding () {
DeleteRows ();
var tr = tab.insertrow (0);
var td = Tr.insertcell (0);
Td.colspan=3;//table several columns are set to several columns
td.align= ' center ';
td.innertext= ' reading data, please wait ... ';
document.getElementById ("Div_pager"). innerhtml= "";
}
function Displaynotfind () {
DeleteRows ();
var tr = tab.insertrow (0);
var td = Tr.insertcell (0);
td.align= ' center ';
td.colspan=3;
Td.innerhtml= ' without any records ';
document.getElementById ("Div_pager"). innerhtml= "";
}

It's easy to call, and the next step is to implement the paging JS code for this feature:

/*************created by stoway*************
Date:2007/4/5
Blog:http://blog.csdn.net/stoway
Mail:stoway#163.com (Please change # to @)
end********************/
Stowaypager=function () {
var _pageindex=1;
var _total=0;
var _pagesize=10;
This.bindpager=function () {
if (_total<=_pagesize) return "";
var pagecount=parseint (_total/_pagesize);
if (_total%_pagesize>0) {
Pagecount+=1;
}
var startindex=1;
var endindex=10;
if (pagecount>10 && _pageindex>6) {
startindex=_pageindex-5;
endindex=startindex+9;
}
if (Endindex>pagecount) {
Endindex=pagecount;
startindex=endindex-9;
if (StartIndex < 1) startindex=1;
}

var strtemp= ';
var str= ';
if (_pageindex>1) {
strtemp= ' <a href= javascript:pager_pagechanged (1) "> Home </a>&nbsp;<a href=" Javascript:pager_ Pagechanged ({0}) "> Prev </a>&nbsp;";
Strtemp=strtemp.replace ("{0}", parseint (_pageindex)-1);
Str+=strtemp;
}
for (i=startindex;i<=endindex;i++) {
if (_pageindex==i) {
str+= + i + ' &nbsp; ';
}
else{
strtemp= ' <a href= ' javascript:pager_pagechanged ({0}) ">[{1}]</a>&nbsp;";
Str+=strtemp.replace ("{0}", i). Replace ("{1}", i);
}
}
if (_pageindex<pagecount) {
strtemp= ' <a href= javascript:pager_pagechanged ({0}) "> next page </a>&nbsp;<a href=" Javascript:pager_ Pagechanged ({1}) "> Last </a>";
Strtemp=strtemp.replace ("{0}", parseint (_pageindex) +1);
Strtemp=strtemp.replace ("{1}", PageCount);
Str+=strtemp;
}
return str;
}
This.setpageindex=function (i) {
_pageindex=i;
}
This.getpageindex=function () {
return _pageindex;
}
This.setpagesize=function (i) {
_pagesize=i;
}
This.getpagesize=function () {
return _pagesize;
}
This.settotal=function (i) {
_total = i;
}
This.gettotal=function () {
return _total;
}
}
function pager_pagechanged (pageIndex) {
if (typeof (Pagechangedevent)!= "undefined") {
Pagechangedevent (PageIndex);
}
}