El último proyecto ASP.NETMVC requiere la clasificación de listas de datos. Originalmente, este es un backend desarrollado basado en Bootstrap, por lo que me pregunto si Bootstrap tiene un complemento de paginación o una función de paginación compatible con jQuery, por lo que el estilo general de backend del sitio web puede unificarse sin tener que escribir un conjunto de funciones de paginación por sí mismo.
Lo primero es descargar Bootstrap Paginator. Dirección de descarga: complemento de paginador de paginador de bootstrap
En primer lugar, los archivos JS y CSS deben introducirse por encima de la vista. Hay tres archivos principales, a saber, los archivos JS CSS, JQuery y Paginator. Busqué en línea y parece que jQuery debe ser la versión 1.8 o superior, nunca lo he probado en persona. Entonces, la referencia del archivo de la vista es:
<Link href = "css/bootstrap.css" rel = "stylesheet"> <script/"text/javascript" src = "js/jQuery-1.8.1.js"> </script> <script type = "text/javascript" src = "js/bootstrap-paginator.js"> </script>>
Luego, la función de paginación es, por supuesto, una actualización local basada en AJAX para atraernos, y por supuesto esto requiere el apoyo de jQuery. Solía hacer una paginación fácil, y esta vez debería ser un poco diferente.
<script> $ (function () {var carid = 1; $ .AJAX ({url: "/oa/setting/getDate", dataType: 'json', type: "post", data: "id =" + carid, éxito: function (data) {if (data! = null) {$ .each (eval ("(" (" + data +") "). Lista, función (Índice, ÍNDICE: ÍNDICE) $ ("#list"). Append ('<table id = "data_table">'); $ ("#list"). Append ('<th> Observación </th>'); $ ("#list"). Append ('<tbody>'); $ ("#list"). Append ('<td> Observación </td>'); ); "> Eliminar </boton> '); $ ("#list "). Append (' </td> '); $ ("#list "). Append (' </tr> '); $ ("##list "). Append (' </tbody> '); $ ("#list "). Append (' <tr> '); $ (list"#list "). Append (' <tbody> Content </td> ' $ ("#List"). type) var currentPage = eval ("(" + data + ")"). CurrentPage; "Página anterior"; "Page =" + Page, Success: Function (data1) {if (data1! = null) {$ .each (eval ("(" + data + ")"). List, function (index, item) {// Transtraight el JSON $ ("#list"). append ('<table id = "data_table">'); $ ("#list"). append ('<th>' '); $ ("#list"). Append ('<th> id </th>'); $ ("#list"). Append ('<th> Observación </th>'); '</td>'); ); "> Modificar </boton> '); $ ("#list "). Append (' <button onClick =" edit (' + item.id +'); "> eliminar </botón> '); $ ("#list "). Append (' </td> '); $ ("#list "). $ ("#list"). Append ('<tr>'); }}}};En la parte principal de la vista, hay dos divs, uno para presentar la lista de datos y la otra para colocar la navegación de la página de selección.
<iv> <label> Lista de departamento </label> <hr/> <div id = "list"> </div> <div id = "Ejemplo"> </div> </div>
El método GetDate en segundo plano es así:
Public ActionResult GetDate (int id, int? Page) {int pageIndex = página ?? 1; // La página actual const int pageSize = 2; // Esto se utiliza para establecer el número de datos que se mostrarán en cada página. Se recomienda escribir esto en Web.Config para el control global // Haga que los datos del departamento se muestren ienumerables <Model.qgoa_department> list = operateContext.current.bllsession.iqgoa_departmentbll.getPagedList (pageIndex, pageSize, x => x.id! = Null, x => x.id); // Obtener el número de datos int rowcount = list.count (); // A través del cálculo, es necesario dividir la página en varias páginas. Los datos que son menos de una página se calculan de acuerdo con una página if (RowCount%PageSize! = 0) {RowCount = RowCount / PageSize + 1; } else {rowCount = rowCount / Pagesize; } // Convertir al formato JSON var strResult = "{/" PageCount/":"+RowCount+",/" CurrentPage/":"+PageIndex+",/" List/":"+JSONConvert.SerializeObject (list)+"}"; return json (strResult, jsonRequestBehavior.Anlowget); }Este método sigue siendo un poco defectuoso y se puede escribir más perfectamente, al igual que la página anterior se puede modificar a nivel mundial leyendo el archivo de configuración web.config, que es conveniente para administrar. Además, para información como los atributos de la página: número de página, página actual, cantidad de datos, etc., puede hacer una clase para almacenar información. Si el proyecto del sitio web es más grande, será más conveniente para nosotros cambiar nuestro propio código.
El efecto de visualización final es el siguiente:
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es el uso del complemento Paginator Bootstrap Paginator que compartí con usted. Espero que sea útil para usted dominar el uso del complemento Paginator Paginator Bootstrap.