Bootstrap Paginator Paging Plugin Dirección de descarga:
DownloadVisit Project en Github
1. Esta es la función JS que debe colocarse en la página que necesita ser paginada:
<span style = "font-size: 14px;"> function Paging (page) {$ .AJAX ({type: "get", url: "$ {ctx}/api/v1/user/1/"+(page-1)+"/5", dataType: "json", éxito: function (msg) {...... // omit (QUISTA Out data)}}); $ .AJAX ({type: "get", url: "$ {ctx}/api/v1/count/count/1", dataType: "json", éxito: function (msg) {var pages = math.ceil (msg.data/5); // la cantidad total de datos en el elemento var de var. = $ ('#Pageul'); // El id cotreing the Id a los siguientes ul BootstrapMaJorversion: 3, CurrentPage: Page, // El número de página actual de las páginas: 5, // Los varios botones se muestran en una página (5 LIS se generan en UL) TotalPages: Páginas // Número total de páginas} Elemento. Bootstrappaginator (Opciones); } </span>página:
<span style = "font-size: 14px;"> <ul id = "pageul"> </ul> </span>
*Se genera automáticamente en Li
2. Lo más importante y central es cambiar el archivo de origen bootstrap-paginator.js usted mismo , de la siguiente manera:
<span style = "font-size: 14px;"> onpageClicked: function (event, originAvent, type, página) {// Mostrar la página correspondiente y recuperar el elemento recién construido relacionado con la página que se hace clic antes para el evento VareR Var CurrentTarget = $ (Event.CurrentTarget); switch (type) {case "primero": currentTarget.bootstrapPaginator ("showFirst"); Paging (página); romper; // Caso de página anterior "anterior": currentTarget.bootstrappaginator ("showPrevious"); Paging (página); romper; caso "Siguiente": CurrentTarget.BootstrapPaginator ("ShowSext"); Paging (página); romper; caso "Last": CurrentTarget.BootstrapPaginator ("showLast"); Paging (página); romper; Case "Página": CurrentTarget.BootstrapPaginator ("show", página); Paging (página); romper; }}, </span>*Llame al método de página (página) después del estilo de la página que hizo clic. Los parámetros en el archivo de origen de la página aquí ya están disponibles, ¡así que pasenlos directamente!
Efecto: Cuando se cambia el estilo, ¡use directamente el valor de la página del control para enviar la solicitud AJAX! Finalmente, se implementa la paginación sin actualizar.
Lo anterior es el conocimiento relevante introducido por el editor para combinar el complemento de paginación de paginadores de bootstrap con AJAX para lograr un efecto dinámico de paginación sin actualización. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!