Ajax pagination Tutorial The front-end code, the HTML part we do not speak. Start the contents of the script directly. First we define 4 global variables, respectively:
All_page: Total pages, basis for creating page numbers
All_record: Total number of data bars, all_record/pagecount=all_page total pages
Current_page: The page number of the current request. Delivered to the service side
PageCount: The number of bars displayed per page, delivered to the server
<title>ajax Data paging </title>
<style>
body{
Font-size : 12px;
}
table{
border-collaps tutorial e:collapse;
}
li{
List-style:none
border:1px solid;
width:20px;
height:20px;
Text-align:center;
Margin : 5px;
padding:2px;
Float:left;
Cursor:pointer;
}
</style>
<body>
Displays 5 data per page by default, and you can set the number of display bars per page in the following text box Enter the number of bars to display per page: <input id= "Edit_count" type= "text"/> <input "button" type= "button" type= "OK" value= "Read ()"/>
<table border= "1" ><!--the table is used to display data content;
<thead><tr><td> number </td ><td> content </td></tr></thead>
<tbody id= "a" ></TBODY>
</table>
<span id= "msg" style= "color:red" ></SPAN>
<br/>
<ul id= "page" ><!--page navigation--></ul>
<script type= "text/web Effects" >
Total number of Var all_page;//pages
var all_record;//total number of bars
var current_page;//current Page
var pagecount;//the number of bars displayed per page
function Ajax_xmlhttp () {
Create XMLHttpRequest in IE, suitable for all versions above ie5.0
var msxmlhttp = new Array ("msxml2.xmlhttp.5.0", "msxml2.xmlhttp.4.0", "msxml2.xmlhttp.3.0", "Msxml2.xmlhttp", " Microsoft.XMLHTTP ");
for (var i=0; i<msxmlhttp.length; i++) {
Try
{
_xmlhttp=new ActiveXObject (Msxmlhttp[i]);
}
catch (E)
{
_xmlhttp=null;
}
//loop to create XMLHTTP based on IE browser. end
If not IE browser, create a browser based on Firefox XMLHttpRequest
if (!_xmlhttp && typeof XMLHttpRequest!= "undefined")
{
_xmlhttp=new XMLHttpRequest ();
}
return _xmlhttp;
}Get Element function
function $ (elem) {
return typeof Elem = = "string"? document.getElementById (elem): Elem;
}Reading data functions
function Read () {
if (arguments.length!=0) {//If a parameter is passed over, it proves that you clicked on a page number
var e = Arguments[0] | | window.event; Standardizing event objects
var obj = E.target | | E.srcelement; Get the Event object, the page number element you clicked
Current_page = parseint (obj.innerhtml)//Get the numeric value in the element to prove that you are asking for the first few pages
$ ("msg"). innerHTML = "Current +current_page+" page;//Hint: page of the current request
}PageCount = $ ("Edit_count"). value;//gets the value of the text box
if (Pagecount.length = = 0) {//If the text box is empty
PageCount = 5; Default display of 5 data per page
}
var ajax = Ajax_xmlhttp (); Assigns a XMLHttpRequest object to a variable.
Ajax.open ("Post", "ajax_page.asp tutorial? action=read&pagecount=" +pagecount+ "& Current_page=" +current_page,true //Set the request method, the requested Web page, the URL's action parameter is read, asynchronous request
Ajax.onreadystatechange = function () {//You can also specify an already-written name
if (ajax.readystate = = 4) {//data returned successfully
if (Ajax.status =) {//http Request status code return OK
var xmldata = ajax.responsexml;//Receives the returned data in XML format and saves it in the XMLDATA variable
All_record = Xmldata.getelementsbytagname ("Allrecord") [0].firstchild.nodevalue;
All_page = All_record/pagecount;
var page_list = $ ("page");
while (page_list.childnodes.length!=0) {
Page_list.removechild (Page_list.childnodes[0]);
}
For (Var i=0;i<math.ceil (all_page); i++) {//Dynamic Create page number list
var li = document.createelement ("Li");
li.innerhtml = i+1;//because I started with 0, so I want +1 to show the page number
Li.onclick = function (e) {read (e)};//the page number of each Li to order a hit event
Page_list.appendchild (li);//To place the generated page number elements in a div
}
var list = xmldata.getelementsbytagname ("list")//in the returned data, get all list labels
if (list.length!=0) {
var t = document.getElementById ("a");//Get the table showing the data
while (t.rows.length!=0) {//When reading data, if the table already exists rows. Delete all
T.removechild (T.rows[0]);
}
for (Var i=0;i<list.length;i++) {
var tr = T.insertrow (t.rows.length);//A few lists add a few lines to the table.
var td = Tr.insertcell (0);//The first cell holds the data number
td.innerhtml = List[i].childnodes[0].firstchild.nodevalue;
var td = Tr.insertcell (1);//The second cell holds the contents of the data
td.innerhtml = List[i].childnodes[1].firstchild.nodevalue;
}
}
}
}
}
Ajax.send (null);//commit request, parameter is NULL
}Read ();//Run the Read function
</script>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
