La tabla Bootstrap es un complemento de tabla ligero que usa AJAX para obtener datos en formato JSON. Su paginación y llenado de datos son muy convenientes y apoyan la internacionalización. Recientemente, el fondo utilizó este complemento para hacer una aplicación de tabla para resumir.
1. Cómo usar
Puede obtener complementos JS, hojas de estilo y complementos internacionales a través del CDN proporcionado por Yopaiyun, o descargarlos directamente en el sitio web oficial. Coloque el siguiente complemento JS y estilos en el encabezado HTML y úselo.
// style <link href = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css" rel = "stylesheet"/> <script src = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"> </script> // internacionalización, tabla china <script src = "http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-cn.min.js"> </script>
2. Llenado de datos de tales
Hay dos formas de obtener datos de la tabla Bootstrap. Uno es especificar la fuente de datos a través de la propiedad de la tabla de datos de datos, pero especificar la URL al inicializar la tabla por JavaScript para obtener datos, como se muestra en el siguiente ejemplo.
<Tabla Data-Toggle = "Tabla" data-url = "data.json"> <tead> ... </tead> </table> $ ('#table'). bootstraTable ({url: 'data.json'});El segundo método para entregar el primer método es más flexible al procesar datos complejos. En general, el segundo método se utiliza para llenar los datos de la tabla.
var $ table = $ ('#table'); $ table.bootstaptable ({url: "duobAoActivityList", dataType: "json", paginación: true, // pagination singleselect: false, data-loce: "zh-us", // table chino búsqueda: true, // show box box lingpagination: "Server", // server de procesamiento de la columna de procesamiento del servidor " nombre ', campo:' name ', align:' Center ', Valign:' Middle '}, {Title:' Status ', Align:' Center ', Valign:' Middle ',}, {Title:' Número de participantes ', campo:' ParticipationCounts ', align:' Center '}, {Título:' Título total de participantes ',' Total: 'Totalcunts', Align: Align: 'Center', {Título {Título {Título: 'starttime', align: 'center',}, {title: 'operación', campo: 'id', align: 'Center', Formatter: function (valor, fila, index) {var e = '<a href = "#" mce_href = "#" onclick = "editar (/' ' + row.id +'/'')> editar </a> '; mce_href = "#" onClick = "del (/''+row.id+'/')"> Eliminar </a> ';El campo de campo debe corresponder al campo devuelto por el servidor antes de que se muestren los datos.
3. Paginación y búsqueda
Cuando se pagina, la mesa de bootstrap pasa dos campos de paginación al backend: límite y compensación. El primero representa el número de cada página, predeterminado a 10, y el segundo representa la compensación de datos durante la paginación.
Al buscar, el campo de búsqueda se pasa al backend, lo que indica el contenido de búsqueda específico.
Los datos devueltos por el lado del servidor también deben incluir dos campos: página (número de páginas) y total (datos totales), y el front-end debe paginar en función de estos dos campos.
El efecto de visualización final se muestra en la figura a continuación:
Lo anterior es el resumen del llenado de datos de implementación de la tabla y la aplicación de paginación en Bootstrap introducido 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!