Page Control Implemented by JavaScript

As Ajax applications become increasingly popular, it is often necessary to load data on the front-end, which can reduce the page loading time and improve the user experience, therefore, in combination with the actual project, I need to write a javascript paging control to bind the table to implement functions similar to the DataGrid paging control. The following is Code .

VaR rows;
VaR tab = Document. getelementbyid ("Table1"); // table object
VaR
_ Total = 0; // total data
VaR pager; // paging object

Function page_load (){
Pager = new
Stowaypager ();
Pager. setpageindex (1); // current index page
Pager. setpagesize (6); // you can specify the number of pages.
Initdata ();
Bindlist (false );
}
Function
Initdata (){
VaR DATA =...; // The data returned by Ajax is not described here.
Rows =
Data;
_ Total = rows. length;
If (_ Total =
0 ){
Displaynotfind ();
Return;
}
Pager. settotal (_ total); // you can specify the total number of data items.
}
Function
Bindlist (){
Displaybinding (); // a prompt for adding a friendly interface
VaR COUNT =
Pager. getpageindex ()*
Pager. getpagesize ();
For (I = count-pager.getPageSize (); I <count; I ++ ){
VaR
Tr = tab. insertrow (Tab. Rows. Length); // Add a row
VaR td_id =
Tr. insertcell (0); // defines the ID column
VaR td_name = tr. insertcell (1); // defines the name column
VaR
Td_city =
Tr. insertcell (2); // defines the 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 (); // Add a div with ID div_pager to return the generated paging code to div_pager.
}

// The pagechangedevent method is triggered when the user clicks the page number. Currently, this method is only valid for a JS paging control contained in the page. It is also easy to change the method if you want to include multiple paging controls.
Function
Pagechangedevent (I ){
Pager. setpageindex (I); // sets the current page
Bindlist ();
}
// This method is mainly used to clear 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; // The number of columns in the table.
TD. align = 'center ';
TD. innertext = 'reading data ...';
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 = 'no records ';
Document. getelementbyid ("div_pager"). innerhtml = "";
}

 

It is quite easy to call. The next step is to implement the paging js code for this function:

/************* Created
Stoway *************
Date: 2007/4/5
Blog: http://blog.csdn.net/stoway
Mail: stoway # 163.com
(Replace # @)
* ******************* 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 = '<
Href = "javascript: pager_pagechanged (1)"> homepage </a> & nbsp; <
Href = "javascript: pager_pagechanged ({0})"> previous page </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 = '<
Href = "javascript: pager_pagechanged ({0})"> [{1}] </a> & nbsp ;';
STR + = strtemp. Replace ("{0}", I). Replace ("{1}", I );
}
}
If (_ pageindex <pagecount ){
Strtemp = '<
Href = "javascript: pager_pagechanged ({0})"> next page </a> & nbsp; <
Href = "javascript: pager_pagechanged ({1})"> last page </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 );
}
}

Link: http://blog.csdn.net/stoway/archive/2007/04/06/1553745.aspx

this control is currently implemented using a JS script. Rewrite it with jquery another day.