Resumen de dos formas de paginación fácil

El DataGrid de Easyui admite la paginación del lado del servidor, pero hay menos información oficial. A continuación se resume dos mecanismos de paginación del lado del servidor de DataGrid. Uno es el mecanismo predeterminado de DataGrid , y el otro es usar AJAX para obtener datos y llenar DataGrid , que se puede usar de acuerdo con la situación.

1: Use el mecanismo predeterminado de DataGrid

Entre bastidores:

 public jsonResult getQuestionUnit () {// easyi dataGrid en sí pasará filas y página int pageSize = convert.toint32 (request ["filas"]); int pagenum = convert.toint32 (solicitud ["página"]); var dal = new QSQuestionUnitDal (); var cuestionunits = dal.getList ("", pagenum -1, pageSize); // El valor devuelto al primer plano debe incluir total y filas var easyUipages = new Dictionary <String, Object> (); easyuipages.add ("total", QuestionUnits.firstorDefault () == null? 0: QuestionUnits.firstordefault (). ReqCount); easyuipages.add ("filas", cuestionunits); return json (easyUipages, jsonRequestBehavior.Anlowget); } Frontend: (function () {(function () {('#dgd'). DataGrid ({PageNumber: 1, // url: "@ViewBag.Domain/Paper/GetQuestionUnit? Arg1 = xxx", Columns: [[{Field: 'Id', Title: 'Id', width: 100}, {campo: 'Nombre', Título: 'Nombre:', Width: 100}, 100}, width: width: width: width: width, width, width, width, width, width, width, width, width, width, width, width, width, width, width, width, width, width, width, width, width, width » ]], Pagination: True, Rownumbers: True, PageList: [3, 6]}); var p = ('#dgd'). dataGrid ('getpager'); ('#dgd'). dataGrid ('getpager'); (p) .pagination ({beforePageText: 'Things', // los caracteres chinos que se muestran en el frontero del cuadro de texto de los textos. {páginas} páginas ', DisplayMsg:' Total {Total} Data ',});

Debe colocar el ('#dgd'). Método DataGrid para

 $ (function () {});

Si intenta llamar al ('#DGD'). Método DataGrid a través de otros métodos JS, no obtendrá el resultado correcto de paginación.

Como puede ver, la URL de línea en el código JS anterior se ha comentado. Si no necesitamos hacer otras operaciones y planeamos consultar datos tan pronto como se cargue la página, no podemos comentar el código. Sin embargo, a menudo, a veces, los parámetros de URL, como el valor de Arg1, deben realizar ciertas operaciones en la interfaz y luego obtenerlos a través del código JS. En este momento, la URL debe ser comentada y asignada a otros lugares, como:

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

En el código anterior, podemos suponer que se hace clic en un botón en la interfaz y se llama al método Step1ok, entonces los datos se consultarán a URL y se presentarán a la interfaz de usuario.

Dos: use AJAX para obtener datos y llenar DataGrid

Si queremos buscar una mayor flexibilidad, no podemos usar el mecanismo predeterminado de DataGrid, es decir, especificar la URL para obtener datos, pero usar AJAX para obtener datos y llenar DataGrid. De esta manera, aún necesita colocar el ('#dgd'). Método DataGrid a

 $ (function () {});

El código de fondo permanece sin cambios, pero hacer clic en un botón y llamar al método Step1ok se convierte en:

 var step1ok = function () {.messager.progress (Título: ′ por favor, msg: ′ loadingdata ... ′, text: ′ procesamiento ..... ′); varp = .messager.progress (title: ′ por favorwaiting ′, msg: ′ loadingdata ... ′, text: ′ procesamiento ..... ′); varp = ('#dgd'). datagrid (''); $ (p) .pagination ({onselectPage: function (pageNumber, pageSize) {alert ('onselectPage pageNumber:' + pageNumber + ', pageSize:' + pageSize); getData (pageNumber, pageSize);}}); getData (1,3);};};

Cuando se llame a la primera llamada, se obtendrán 3 datos en la primera página:

 getData (1,3);

Entonces podemos ver que, al mismo tiempo, también creamos un procesador de tiempo para el evento OnselectPage de Pagination, de modo que cuando la página sea otro día, iremos a:

getData (PageNumber, PageSize);

Además, dado que pasamos por alto el mecanismo original de DataGrid para la paginación, adoptamos nuestra propia portada $ .messager.progress, y luego descubrimos la portada en el éxito de Ajax.

El método getData es el siguiente:

 var getData = function (página, filas) {.AJAX ({type: "Post", url: "@ViewBag.Domain/Paper/GetQuestionUnit", Data: "Page =" + Page + "& Rows =" + Rows, Error: Function (XMLHTTPREQUEST, TextStatus, Errorthrown) {Alert (textus); "@Viewbag.Domain/Paper/GetQuestionUnit", Data: "Page =" + Page + "& Rows =" + Rows, Error: Function (xmlhttprequest, textStatus, errorthrown) {alerta (textStatus) ;. Messager.progress ('Close'); //.Each(Data,Function(i,Item)//alert(item) ;/);

Lo anterior es la descripción completa de los dos métodos de Pagination Pagination de EasyUi presentados por el editor. Espero que te sea útil. Si desea saber más, ¡preste atención al sitio web de Wulin.com!