A tabela de bootstrap é um plug-in leve que usa o AJAX para obter dados no formato JSON. Sua paginação e preenchimento de dados são muito convenientes e apóiam a internacionalização. Recentemente, o plano de fundo usou esse plug-in para fazer um aplicativo de tabela para resumir.
1. Como usar
Você pode obter plug-ins JS, folhas de estilo e plug-ins internacionais através da CDN fornecida pelo YouPaiyun ou baixá-los diretamente no site oficial. Coloque o seguinte plug-in e estilos JS no cabeçalho HTML e use-o.
// 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.1/bootstrap-table.min.js"> </script> // internacionalização, tabela chinesa <script src = "http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-cn.min.js"> </script>
2. Table preenchimento de dados
Existem duas maneiras de obter dados da tabela de bootstrap. Uma é especificar a fonte de dados através da propriedade Data-URL da tabela, mas especificar o URL ao inicializar a tabela por JavaScript para obter dados, conforme mostrado no exemplo a seguir.
<tabela data-toggle = "tabela" data-url = "data.json"> <tead> ... </sead> </it tabela> $ ('#tabela'). bootstraptable ({url: 'data.json'});O segundo método de entregar o primeiro método é mais flexível ao processar dados complexos. Geralmente, o segundo método é usado para preencher os dados da tabela.
var $ tabela = $ ('#tabela'); $ tabela.BootStraptable ({url: "DuobaoActivityList", Datatype: "JSON", Paginação: True, // Paginação SingleSelect: False, Locale: "Zh-Us", // Tabela Chinesa: Singe // Mostrar caixa de busca Sidepagination: "Server", "servidor", "servidor", "SERVERTER (SERVERTER (ZH-US", // Tabela Chinesa: Sost, // Show Box Sideppination name',field: 'name',align: 'center',valign: 'middle'}, {title: 'status',align: 'center',valign: 'middle',}, {title: 'number of participants',field: 'participationCounts',align: 'center'},{title: 'total number of participants',field: 'totalCounts',align: 'center'},{title: 'StartTime', Align: 'Center',}, {Title: 'Operação', Field: 'Id', Align: 'Center', Formatter: function (valor, linha, índice) {var e = '<a href = "#" mce_href = "#" onClick = "edit (/' ' + row.id +'/') MCE_HREF = "#" ONCLICK = "Del (/''+row.id+'/')" Excluir </a> ';O campo de campo deve corresponder ao campo retornado pelo servidor antes que os dados sejam exibidos.
3. Paginação e pesquisa
Ao pagar, a tabela de bootstrap passa dois campos de paginação para o back -end: limite e deslocamento. O primeiro representa o número de cada página, padrão para 10, e o último representa o deslocamento dos dados durante a paginação.
Ao pesquisar, o campo de pesquisa é passado para o back -end, indicando o conteúdo de pesquisa específico.
Os dados retornados pelo lado do servidor também devem incluir dois campos: página (número de páginas) e total (dados totais), e o front-end deve pagar com base nesses dois campos.
O efeito final da exibição é mostrado na figura abaixo:
O exposto acima está o resumo do aplicativo de preenchimento e paginação de dados de implementação da tabela no Bootstrap introduzido pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!