Primeiro, observe as renderizações de implementação. Se você acha que não é ruim, consulte o código de implementação.
Os dados acima são pagos abaixo
Como usar
1 Importar CSS do 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 TABLE PAGING PLUGIN LTABLE.JS
<script src = "js/ltable.js" type = "text/javascript"> </script>
4 Adicione a tag html e atribua valores ao ID
<!-tabela-> <div id = "d"> </div> <!-paginação-> <div id = "u"> </div>
5 Obtenha dados
Aqui, obtenha os dados simulados do arquivo json através do Ajax
Inittable (dados) é o método de inicialização de tabelas e paginação
$ .ajax ({url: "json/data.json", type: "get", datatype: "json", sucesso: function (dados) {inittable (dados);}, erro: function (e) {alert ("erro de aquisição de dados");}});6 Inicialize a tabela
Inicialize a tabela primeiro no método de inicialização
var obj=data;var myTable=$.lTable( '#d', { data:obj.list //json data, title:["userid","username","password","userrolename","status","<button onclick='updF(id)'>Modify</button><button onclick='delF(id)'>Delete</button>"] //Title corresponding campos, nome: ["userID", "nome de usuário", "senha", "nome da permissão", "status", "_ opt"], tid: "userID", caixa de seleção: "userID"});Descrição do código
6.1 Método de inicialização
$ .ltable ('id', {dados, título, nome, tid, chechbox});
6.2 Descrição do atributo
ID: o bloco de preenchimento selecionado pela página
Dados: JSON Data exibido na página
Título: Campo correspondente a dados para cada coluna da tabela
Nome: A primeira linha da tabela exibe o campo
Tid: o valor da chave correspondente de cada linha (pode ser omitido)
Caixa de seleção: Valor correspondente à caixa de seleção (pode ser omitido)
6.3 Descrição da caixa de seleção
Ative ao adicionar o atributo chechbox init
Nome da caixa de seleção = "IDS"
Obtenha o método da coluna selecionada: $ .ltable.getCheckBoxids () Exemplo de valor de retorno "1,2,3,4"
6.4 Instruções de operação
Quando o nome do atributo = _Opt, o cabeçalho da tabela muda automaticamente a posição "Operação"
O título de atributo correspondente pode adicionar botões e outras operações
Exemplo: "<Button OnClick = 'UPDF (ID)'> Modify </botão>"
O método de clique é UPDF (). O ID do parâmetro é o campo correspondente do atributo tid.
7 Inicialize a paginação
Então a parte da paginação
$ .lPaging ('#u', // ID correspondente {pagenumber: obj.pagenumber // Número da página atual, totalPage: obj.totalpage // Número total da página, contagem de contagem: 5 // Número de páginas exibidas (pode ser omitido), contagem: contagem: count, count, números: números: TRUE // PageSize, DATAURL);Descrição do código
7.1 Método de inicialização
$ .lPaging ('id', {pagenumber, totalpage, contagem, contagem, onPagechange (num), inputSearch});
7.2 Método de atributo Descrição
ID: o bloco de preenchimento selecionado pela página
Pagenumber: número atual da página
TotalPage: contagem total de páginas
contagem: o número de exibições de página (o padrão 5 pode ser omitido)
Contagem: Número total de dados
OnPageChange (NUM): retorna o evento de clique
InputSearch: Se você deve exibir a caixa de entrada de consulta, padrão boolean false
getInputVal (): retorna o número na caixa de entrada
8 Todo o código
<! Doctype html> <html> <head> <meta charset = "utf-"> <meta http-equiv = "x-ua-compatível" content = "ie = edge"> </title> </title> <link rel = "styleSheet" href "" id = "d"> </div> <!-paginação-> <div id = "u"> </div> </body> <script src = "js/jQuery -... min.js" type = "text/javascript"> </javs> myTable; var dataurl = ""; // Inicialize a página initpage (, Pagesize, ""); // ajax obtém função de dados initpage (num, ps, url) {$. ajax ({url: "json/data.json", type: "get", // type: "post", // data: "userinfovo.pageid ="+num+"& userInfovo.pagecount ="+ps, datatype: "json", Sucesso: function (dados) {inittable (dados);}, erro: function (e) {console.log (e) alert ("erro de aquisição de dados");}});} // inicialize a tabela e os dados da paginação função inittable (dados) {// var obj = avali (""+dados+")); obj = data; // TablemyTable = $. ltable ('#d', {data: obj.list // JSON Data, title: ["userID", "nome de usuário", "senha", "userrolename", "status",, <butkick = 'updf (id)'> modify </</button ", onClick", <blowlick = 'up)'> '> modify </</button ", em botão", <blowlick =' up) '>'> '> campo, nome: ["userID", "nome de usuário", "senha", "nome da permissão", "status", "_ opt"], tid: "userID", caixa de seleção: "userID"}); // myTable.getCheckBoxids (); // obtenha o valor selecionado por caixa de seleção // página $ .lPaging ('#u', // componente id {pagenumber: obj.pageNumber // Número da página atual, totalPage: obj.totalpage // número total de páginas, contagem: // o número de exibições de página (pode ser omitido), contagem: contagem: canter: cen.cpound, em fita, //, o número de Página: (num) {initpage (num, Pagesize, dataurl);}});} // modificar a função do método updf (id) {alert ("modify:"+id);} // excluir função do método delf (id) {alert ("Delete:"+id);} </script> </html>Wulin.com recomenda tópicos relacionados ao Bootstrap:
Habilidades de operação de componentes de bootstrap
Resumo do conhecimento relacionado ao bootstrap
O acima é a explicação detalhada dos exemplos de plug-in de formulário de Bootstrap3 e plug-in de paginação introduzidos 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!