Ajax implémente une requête de pagination

Étant donné que la quantité de données renvoyées par la requête est importante, supérieure à 100 000 éléments de données, la fonction de requête de page doit être optimisée. Abandonnez la pratique de l'utilisation de DataGrid dans le programme d'origine et écrivez vous-même le module d'affichage de pagination.
Ajoutez d’abord quelques DIV à la page :

<div id="div_trackpoint" style=" border:solid 1px gray; height:230px; width:99%; overflow-y:auto;">Utilisé pour afficher les données renvoyées par la requête</div>
<div id="div_trackpages" style=" height:15px; width:99%; font-size:8pt; word-break:break-all; word-wrap: break-word;">Numéro de page utilisé pour afficher la pagination< /div><br />
<div id="div_trackpagetab" style=" height:15px; width:99%; font-size:8pt; text-align:center;">Utilisé pour afficher la page précédente, la page suivante,..., la page d'accueil, Dernière page et autres boutons de contrôle</div>
<div id="div_trackpage_status" style=" height:20px; width:99%; font-size:8pt; text-align:center;">Utilisé pour afficher le numéro de page de la page actuelle</div>

implémente le client fonction de pagination :
varCurPage=0; //Page actuelle
var TotalPage=0; //Nombre total de pages
var PageTab=7; //Le nombre de pages affichées dans chaque groupe
var CurTab=0; //Regroupement actuel

Mon programme est configuré pour afficher 50 éléments de données par page et 7 pages par groupe. Celles-ci peuvent être ajustées selon les besoins.

La fonction TurnTab est utilisée pour changer de groupe et calculer quel groupe de pages afficher en fonction de la valeur transmise. val=1 signifie passer au groupe suivant, val=-1 signifie passer au groupe précédent, 0 signifie passer au premier groupe et -2 signifie passer au dernier groupe. Les utilisateurs changent de groupe en cliquant sur le symbole ... sur la page.

fonction TurnTab(val)
{
var nPage = 0 ;

si (val == 1) {
CurTab++;
nPage = (CurTab - 1) * PageTab + 1 ;
}
sinon si (val == -1) {
CurTab--;
nPage = (CurTab - 1) * PageTab + 1 ;
}
sinon si (val == 0) {
CurTab = 1 ;
nPage = 1 ;
}
sinon si (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)">Page d'accueil</a>&nbsp;";

strInner += "<a href="javascript:PreviousPage()">Page précédente</a>&nbsp;";

strInner += "Total" + TotalPage + "Page&nbsp;";

strInner += "<a href="javascript:NextPage()">Page suivante</a>&nbsp;";

strInner += "<a href="javascript:TurnPage(" + TotalPage + ")">Dernière page</a>&nbsp;";

tabinfo.innerHTML = strInner;

strInner = "";

if (CurTab > 1) strInner += "<a href="javascript:TurnTab(-1)">...</a>&nbsp;";

pour ( ; nPage<=CurTab*PageTab; nPage++) {

si (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;

}

La fonction TurnPage est utilisée pour changer de pagination, val représente le nombre de pages vers lesquelles basculer et la plage de requête est générée en fonction du nombre de pages à afficher, par exemple en interrogeant les 50 premiers enregistrements, les enregistrements de 51 à 100, et les enregistrements de 101 à 150. . .
cscCustomAnalyst est une fonction d'appel asynchrone et le code d'implémentation de la fonction sera publié ci-dessous. "Method", "SID", "TIME1", "TIME2", "ROW1", "ROW2" sont tous des paramètres requis pour exécuter la requête. La méthode est utilisée pour déterminer quelle requête exécuter, "ROW1", "ROW2" signifie. La plage d'enregistrements à interroger et d'autres paramètres peuvent être ajustés en fonction des besoins réels. ShowCarTrack(val) est une fonction qui traite les résultats de la requête. Les résultats obtenus une fois l'appel asynchrone terminé seront analysés, traités et affichés dans cette fonction. Cette partie du code est écrite en fonction de l'implémentation spécifique, je ne la listerai donc pas ici.

fonction TurnPage(val)
{
if (Nombre(val) != CurPage) {

CurPage = Nombre(val);

var row1 = String((CurPage - 1) * 50 + 1);
var row2 = String(CurPage * 50);

var trackinfo = document.getElementById("div_trackpoint");
trackinfo.innerHTML = "Obtention des données, veuillez patienter...";

_cscCustomAnalyst(["Méthode", "SID", "TIME1", "TIME2", "ROW1", "ROW2"],
["GetCarTrack", "80100117", t1, t2, rangée1, rangée2],
ShowCarTrack,onQueryError);

si (CurPage == 1) TurnTab(0);

si (CurPage == TotalPage) TurnTab(-2);

var statusinfo = document.getElementById("div_trackpage_status");

statusinfo.innerHTML = "Page" + CurPage + "Page" ;
}

}

NextPage passe à la page suivante et appelle TurnPage pour l'implémenter. Si la page suivante dépasse le groupe actuel, elle doit passer au groupe suivant.

fonctionPageNext()
{
si (CurPage < TotalPage) {

TurnPage(CourPage+1);

si ((CurPage + 1) > (CurTab * PageTab)) {
TournerTab(1);
}
}

}

PreviousPage passe à la page précédente et appelle TurnPage pour l'implémenter. Si la page précédente dépasse le groupe actuel, elle doit passer au groupe précédent.
fonction Page Précédente()
{
si (CurPage > 1) {

TurnPage (CurPage-1);

si ((CurPage - 1) <= ((CurTab - 1) * PageTab)) {
TournerTab(-1);
}

}
}

_cscCustomAnalyst est une fonction d'appel asynchrone, xhr.open("post","MapQuery.ashx", true); Ce paragraphe signifie soumettre la requête à la page MapQuery.ashx. Toutes les opérations de base de données de segments de serveur sont effectuées dans MapQuery.ashx.

function _cscCustomAnalyst (paramNames, paramValues, onComplete, onError){

var xhr=_GetXmlHttpRequest();

xhr.open("post","MapQuery.ashx", true);

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange=fonction(){

var readyState=xhr.readyState;

si (readyState==4){

var status=xhr.status;

si(statut==200){

var resultset = xhr.responseText;

si(ensemble de résultats == null){
onComplete(null);
retour;
}

si(onComplete){
onComplete(ensemble de résultats);
ensemble de résultats = nul ;
}
}
autre{
si(onErreur){
onError(xhr.responseText);
}
}

xhr.onreadystatechange = function(){};

xhr = nul ;
}
} ;

var paramString=null;

if(paramNames&&paramNames.length>0){

var params = nouveau tableau();

while(paramNames&&paramNames.length>0)
{
params.push(paramNames.shift()+"="+_ToJSON(paramValues.shift()));
}

paramString = params.join("&");

}

xhr.send(paramString);
};

Enfin, répertoriez une instruction Oracle SQL qui interroge par plage de quantités : (interrogez les 50 premiers enregistrements)
SÉLECTIONNER *
FROM (SELECT /*+ FULL(tablename)*/ fieldname, ROWNUM rn FROM tablename WHERE condition AND ROWNUM <= 50 ORDER BY field DESC) t2 où t2.rn >= 1;