Ajax implementation Paging Query

Because the query returns a large amount of data, more than 10w of data, the page query function needs to be optimized. Discard the use of the DataGrid in the original program, write the paging display module yourself.

First add a few div on the page:

<div id="div_trackpoint" style=" border:solid 1px gray; height:230px; width:99%; overflow-y:auto;">用于显示查询回的数据</div>
　　 <div id="div_trackpages" style=" height:15px; width:99%; font-size:8pt; word-break:break-all; word-wrap: break-word;">用于显示分页的页码</div>

　　 <div id="div_trackpagetab" style=" height:15px; width:99%; font-size:8pt; text-align:center;">用于显示前一页、后一页、...、首页、尾页等控制按钮</div>

　　 <div id="div_trackpage_status" style=" height:20px; width:99%; font-size:8pt; text-align:center;">用于显示当前页的页码</div>

To implement a client page-paging function:

var curpage=0; Current page

var totalpage=0; Total pages

var pagetab=7; Display pages per group

var curtab=0; Current group

My program is set to display 50 data per page, 7 pages per group, which can be adjusted on demand.

The Turntab function toggles the grouping and calculates which group of pages to display based on the passed-in Val. val=1 means switch to the next group, Val=-1 to the previous group, 0 to the first group, and 2 to the last group.　Users click on the page ... Symbol to toggle the grouping.

Function Turntab (val)
{
var npage = 0;
if (val = = 1) {
curtab++;
Npage = (CurTab-1) * pagetab + 1;
}
else if (val = = 1) {
curtab--;
Npage = (CurTab-1) * pagetab + 1;
}
else if (val = = 0) {
Curtab = 1;
Npage = 1;
}
else if (val = = 2) {
Curtab = Math.floor (totalpage/pagetab) + 1;
Npage = (CurTab-1) * pagetab + 1;
}
var carinfo = document.getElementById ("Div_trackpages");
var tabinfo = document.getElementById ("Div_trackpagetab");

var strinner = "";
Strinner + = "<a href=" javascript:turnpage (1) "> Home </a>&nbsp;";
Strinner + = "<a href=" Javascript:previouspage () "> Prev </a>&nbsp;";
Strinner + = "Total" + totalpage + "page &nbsp;";
Strinner + + "<a href=" Javascript:nextpage () "> next page </a>&nbsp;";
Strinner + = "<a href=" javascript:turnpage ("+ Totalpage +") "> Last </a>&nbsp;";
tabinfo.innerhtml = Strinner;
Strinner = "";
if (Curtab > 1) Strinner + = "<a href=" Javascript:turntab ( -1) ">...</a>&nbsp;";
for (; npage<=curtab*pagetab; npage++) {
if (npage <= totalpage) {
Strinner + = "<a href=" javascript:turnpage ("+ Npage +") ">" +npage+ "</a>&nbsp;"
}
}
if (Npage < totalpage) Strinner + = "<a href=" Javascript:turntab (1) ">...</a>&nbsp;";
carinfo.innerhtml = Strinner;
}