Résumé de deux façons de pagination Easyui

DataGrid d'EasyUi prend en charge la pagination côté serveur, mais il y a moins d'informations officielles. Le suivant résume deux mécanismes de pagination côté serveur de DataGrid. L'un est le mécanisme par défaut de DataGrid , et l'autre consiste à utiliser l'AJAX pour obtenir des données et remplir DataGrid , qui peut être utilisé en fonction de la situation.

1: Utilisez le mécanisme par défaut de DataGrid

Dans les coulisses:

 public JSonResult getQuestionUnit () {// Easyi DataGrid lui-même passera les lignes et la page int pagesize = convert.toint32 (demande ["lignes"]); int pagenum = convert.toint32 (demande ["page"]); var dal = new QsQuertionUnitdal (); var QuesketUnits = dal.getList ("", pagenum -1, pagesize); // La valeur renvoyée au premier plan doit inclure le total et les lignes var easyUipages = new Dictionary <String, Object> (); easyUipages.add ("total", questionnits.firstordefault () == null? 0: questionnits.firstordefault (). reqcount); EasyUipages.add ("Rows", QuesterNits); return json (easyUipages, jsonrequestbehavior.allowget); } Frontend: (function () {(function () {('#dgd'). DataGrid ({pageNumber: 1, // url: "@ Viewbag.domain / Paper / GetQuestionUnit? Arg1 = xxx", Columns: [{{champ: 'id', titre: 'id', largeur: 100}, {champ: 'name', title: 'id', largeur: 100}, {Field: 'name', Title: ', Width: 100},, {champ ]], pagination: true, rownUmbers: true, pagelist: [3, 6]}); var p = ('#dgd'). dataGrid ('getPager'); ('# dgd'). dataGrid ('getPager'); (p) .pagination ({avant le texte: 'choses', // les caractères chinois ont été affichés à l'avant de l'oxydat: 'choses' ', // les caractères chinois Total {pages} pages ', displaymsg:' total {total} data ',});});

Vous devez placer la méthode ('#dgd').

 $ (function () {});

Si vous essayez d'appeler la méthode ('#dgd'). DataGrid via d'autres méthodes JS, vous n'obtiendrez pas le résultat correct.

Comme vous pouvez le voir, l'URL de ligne dans le code JS ci-dessus a été commentée. Si nous n'avons pas besoin de faire d'autres opérations et que nous prévoyons de demander des données dès que la page est chargée, nous ne pouvons pas commenter le code. Cependant, souvent, parfois, les paramètres d'URL, tels que la valeur de Arg1, doivent effectuer certaines opérations sur l'interface, puis les obtenir via le code JS. À l'heure actuelle, l'URL doit être commentée et affectée à d'autres endroits, comme:

 var Step1OK = function () {$ ('# dgd'). dataGrid ({url: "@ viswebag.domain / papier / getQuestionUnit? arg1 = xxx",});};

Dans le code ci-dessus, nous pouvons supposer qu'un bouton de l'interface est cliqué et que la méthode Step1OK est appelée, puis les données seront interrogées sur URL et présentées à l'interface utilisateur.

Deux: utilisez Ajax pour obtenir des données et remplir DataGrid

Si nous voulons poursuivre une plus grande flexibilité, nous ne pouvons pas utiliser le mécanisme par défaut de DataGrid, c'est-à-dire spécifier l'URL pour obtenir des données, mais utiliser AJAX pour obtenir des données et remplir DataGrid. De cette façon, vous devez toujours placer la méthode ('#dgd').

 $ (function () {});

Le code d'arrière-plan reste inchangé, mais cliquer sur un bouton et appeler la méthode Step1ok devient:

 var Step1ok = fonction () ot Ress (Titre: 's'il vous plaîtwaiting', msg: ′ chargingdata ... ′, texte: ′ Traitement ..... ′); VARP = («# dgd»). DataGrid («getPager»); $ (p) .pagination ({onSelectPage: fonction (pageNumber, pagesize) {alert ('onSelectPage pageNumber:' + pageNumber + ', pagesize:' + pagesize); getData (pageNumber, pagesize);}}); getData (1,3);};

Lorsque le premier appel est appelé, 3 éléments de données sur la première page seront obtenus:

 getData (1,3);

Ensuite, nous pouvons voir qu'en même temps, nous avons également créé un processeur temporel pour l'événement OnSelectPage de pagination, de sorte que lorsque la page est un autre jour, nous irons à:

getData (PageNumber, PageSize);

De plus, depuis que nous avons contourné le mécanisme d'origine de DataGrid pour la pagination, nous avons adopté notre propre couverture $ .Messager.Progress, puis découvert la couverture dans le succès de l'Ajax.

La méthode GetData est la suivante:

 var getData = fonction (page, lignes) {.ajax ({type: "post", URL: "@ Viewbag.domain / Paper / GetQuestionUnit", Données: "Page =" + Page + "& Rows =" + Rows, Error: Function (XmlHttprequest, TextSatus, "Post", "Post". URL: "@ Viewbag.Domain / Paper / GetQuestionUnit", Data: "Page =" + Page + "& Rows =" + Rows, Error: Function (XmlHttpRequest, TextStatus, ErrorthRown) {Alert (TextStatus);. //.each(data,function(i,Item)//Alert(Item) ;//) ;.each(data,function(i,Item)//Alert(Item) ;//) ;.Messager.Progress('close ');

Ce qui précède est la description complète des deux méthodes de pagination de pagination EasyUi qui vous est présentée par l'éditeur. J'espère que cela vous sera utile. Si vous voulez en savoir plus, veuillez faire attention au site Web de Wulin.com!