Primero, mire las representaciones de implementación. Si cree que no está mal, consulte el código de implementación.
Los datos anteriores se pagan a continuación
Cómo usar
1 CSS de importación de bootstrap
<link rel = "Stylesheet" href = "CSS/V3/bootstrap.min.css">
2 importar jQuery
<script src = "js/jQuery-1.10.1.min.js" type = "text/javaScript"> </script>
3 Import Tabla Paging Plugin Ltable.js
<script src = "js/ltable.js" type = "text/javascript"> </script>
4 Agregar etiqueta HTML y asignar valores a ID
<!-Table-> <div id = "d"> </div> <!-Pagination-> <div id = "u"> </div>
5 Obtener datos
Aquí, obtenga los datos simulados del archivo JSON a través de AJAX
InitTable (datos) es el método para inicializar tablas y paginación
$ .AJAX ({url: "json/data.json", type: "get", dataType: "json", éxito: function (data) {inItTable (data);}, error: function (e) {alerta ("error de adquisición de datos");});6 Inicializar la tabla
Inicializar la tabla primero en el método de inicialización
var obj = data; var mytable = $. Ltable ('#d', {data: obj.list // json data, title: ["userId", "username", "contraseña", "userRoleName", "status", "<button ongClick = 'updf (id)'> modificar </bootin <bootin ° ° = 'delf (id)'> Delete </button" Campos, nombre: ["UserId", "Nombre de usuario", "Contraseña", "Nombre del permiso", "Estado", "_ Opt"], TID: "UserId", CheckBox: "UserId"});Descripción del código
6.1 Método de inicialización
$ .ltable ('id', {datos, título, nombre, tid, chechbox});
6.2 Descripción del atributo
ID: el bloque de relleno seleccionado por la página
Datos: JSON Datos que se muestran en la página
Título: Campo correspondiente a los datos para cada columna de la tabla
Nombre: La primera fila de la tabla muestra el campo
TID: el valor clave correspondiente de cada línea (se puede omitir)
casilla de verificación: valor correspondiente a la casilla de verificación (se puede omitir)
6.3 Descripción de la casilla de verificación
Activar al agregar el atributo chechbox init
Nombre de la casilla de verificación = "IDS"
Obtenga el método de columna seleccionada: $ .ltable.getcheckboxids () Valor de retorno Ejemplo "1,2,3,4"
6.4 Instrucciones de operación
Cuando el nombre del atributo = _opt, el encabezado de la tabla cambia automáticamente la posición "operación"
El título de atributo correspondiente puede agregar botones y otras operaciones
Ejemplo: "<button onClick = 'updf (id)'> modificar </botón>"
El método de clic es updf (). La ID del parámetro es el campo correspondiente del atributo TID.
7 Inicializar la paginación
Entonces la parte de la paginación
$ .lpaging ('#u', // ID correspondiente {PageNumber: obj.pageNumber // número de página actual, totalPage: obj.totalPage // número de página total, conteo: 5 // número de páginas mostradas (se puede omitir), count: obj.Count, inputSearch: true // muestra el cuadro de entrada de consulta, onpagechange: function (num) {num) dataUrl);Descripción del código
7.1 Método de inicialización
$ .lpaging ('id', {PageNumber, TotalPage, CountSize, Count, OnPageChange (num), InputSearch});
7.2 Descripción del método de atributo
ID: el bloque de relleno seleccionado por la página
PageNumber: número de página actual
TotalPage: recuento total de páginas
CountSize: el número de pantallas de página (se puede omitir el 5 predeterminado)
Conteo: Número total de datos
onpagechange (num): devuelve el evento de clics
InputSearch: si se debe mostrar el cuadro de entrada de consulta boolean predeterminado falso
getInputVal (): devuelve el número en el cuadro de entrada
8 Todo el código
<! Doctype html> <html> <head> <meta charset = "utf-"> <meta http-oquiv = "x-ua compatible" content = "ie = edge"> <title> </title> <link rel = "stylesheet" href = "css/v/bootstrap.min.css"> </head> <! Table--><div id="d"></div><!-- Pagination--> <div id="u"></div></body><script src="js/jquery-...min.js" type="text/javascript"></script><script src="js/lTable.js" type="text/javascript"></script><script>var pageSize=;var mytable; var dataUrl = ""; // Inicializar la página InitPage (, PageSize, ""); // AJAX Obtiene la función de datos initPage (num, ps, url) {$. Ajax ({url: "json/data.json", type: "get", // type: "post", // data: "userInfovo.pageid ="+num+"& userInfovo.pageCount ="+ps, dataTiPi éxito: function (data) {inItTable (data);}, error: function (e) {console.log (e) alert ("error de adquisición de datos");}});} // Inicializar la función de datos de tabla y paginación inItTable (data) {// var obj = eval ("(+data+") "); var obj = data; // TablemyTable = $. campo, nombre: ["UserId", "Nombre de usuario", "Contraseña", "Nombre de permiso", "Estado", "_ Opt"], TID: "UserId", CheckBox: "UserId"}); // mytable.getCheckboxids (); // Obtenga el valor seleccionado por casilla de verificación // página $ .lpaging ('#u', // componente id {pageNumber: obj.pageNumber // número de página actual, totalPage: obj.totalpage // número de página total, contado: // el número de la página muestra (se puede omitir), contar: obj.count, inspingSearch: verdadero // show the query box, OnpageS: function (function (function (se puede omitir)) {initPage (num, pageSize, dataUrl);}});} // modificar la función de método actualf (id) {alert ("modificar:"+id);} // Eliminar la función de método delf (id) {alert ("delete:"+id);} </script> </html>Wulin.com recomienda temas relacionados con Bootstrap:
Habilidades de operación de componentes de arranque
Resumen del conocimiento relacionado con la bootstrap
Lo anterior es la explicación detallada del complemento del formulario Bootstrap3 y los ejemplos de complemento de paginación introducidos por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!