O projeto mais recente do ASP.NETMVC requer a classificação de listas de dados. Este é originalmente um back-end desenvolvido com base no bootstrap, então eu me pergunto se o Bootstrap possui um plug-in de paginação ou uma função de paginação suportada pelo JQuery, para que o estilo geral de back-end do site possa ser unificado sem ter que escrever um conjunto de funções de paginação por si mesmo.
A primeira coisa é baixar o Bootstrap Paginator. Endereço para download: Bootstrap Paginator Paginator Plugin
Primeiro de tudo, os arquivos JS e CSS devem ser introduzidos acima da visualização. Existem três arquivos principais, a saber, os arquivos JS do CSS, JQuery e Paginator. Eu procurei on -line e parece que o jQuery deve ser a versão 1.8 ou superior, nunca testei isso pessoalmente. Portanto, a referência do arquivo da visualização é:
<link href = "css/bootstrap.css" rel = "Stylesheet"> <script type = "text/javascript" src = "js/jQuery-1.8.1.js"> </script> <script type = "text/javascript" src = "js/bootstrap-papista
Então, a função de paginação é, obviamente, uma atualização local baseada no Ajax para nos atrair e, é claro, isso requer o apoio do jQuery. Eu costumava fazer a Paging Easyui, e desta vez deveria ser um pouco diferente.
<SCRIPT> $ (function () {var carid = 1; $ .ajax ({url: "/oa/setting/getDate", datatype: 'json', type: "post", dados: "id =" + carid: succen: function (dados) {if (dados! Lista "#"). $ (LISTA "#"). Lista "#"). Appender ('<tbody>'); $ (list#"). Appender ('<t. ); "> Excluir </botão> '); $ ("#list "). Append (' </td> '); $ ("#list "). Append (' </tr> '); $ ("#list "). Append (' </tbody> '); $ ("#list). $ (LISTRA#"Append ('<T.' Item.message + '</td>'); CurrentPage = Eval ("(" Dados + ")"). CurrentPage; página "; case" a seguir ": retornar" próxima página "; case" Última ": retornar" última página "; case" página ": retornar página;}}, // clique em Evento, usado para atualizar a lista inteira através do ajax onpageclicked: function (event, OriginalEvent, Type, Page) {$ .aJax ({url:"/oa/seting/setfing/setfing/setting, gets/settenate, gets, sted) {utenate): "/setfing: settalevent, get, type) {$ página, sucesso: function (data1) {if (data1! = null) {$ .each (avaliar ("(" + dados + ")"). Lista, função (índice, item) {// transtrair o json retornado $ ("#list"). Append ('<tabela id = "data_table">'); $ ("#list"). $ (list#"). (Lista#LISTA "). '</td>'); ); "> Modificar </botão> '); $ ("#list "). Append (' <button onclick =" edit (' + item.id +'); "> delete </button> '); $ ("#list "). LISTA DA "#LISTA"). }};Na parte principal da visualização, existem dois divs, um para apresentar a lista de dados e a outra para colocar a navegação da página de seleção.
<div> <brety> Lista de departamento </elabel> <hr/> <div id = "list"> </div> <div id = "exemplo"> </div> </div>
O método getDate em segundo plano é assim:
public ActionResult getDate (int id, int? 1; // A página atual const int pageSize = 2; // Isso é usado para definir o número de dados a serem exibidos em cada página. Recomenda -se escrever isso em web.config para controle global // Obtenha os dados do departamento a serem exibidos ienumerable <mod.qgoa_department> list = Operatecontext.current.bllSession.iqgoa_departmentBll.getPagedList (PageIndex, Pagesize, x => x.id! // Obtenha o número de dados int rowCount = list.count (); // Através do cálculo, é necessário dividir a página em várias páginas. Os dados inferiores a uma página são calculados de acordo com uma página se (rowcount%pagageSize! = 0) {rowCount = rowcount / pagageSize + 1; } else {RowCount = RowCount / PageSize; } // converte em formato json var strresult = "{/" pageCount/":"+rowCount+",/" currentPage/":"+PageIndex+",/" list/":"+jsonConvert.SerializeObject (list)+"}"; Return json (strresult, jsonRequestBehavior.allowget); }Esse método ainda é um pouco falho e pode ser escrito com mais perfeição, assim como o PageSize acima pode ser modificado globalmente, lendo o arquivo de configuração Web.config, que é conveniente para gerenciar. Além disso, para informações como atributos de página: número da página, página atual, quantidade de dados, etc., você pode fazer uma classe para armazenar informações. Se o projeto do site for maior, será mais conveniente alterar nosso próprio código.
O efeito final da exibição é o seguinte:
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é o uso do plug-in de paginação de Bootstrap Paginator que compartilhei com você. Espero que seja útil que você domine o uso do plug-in de paginação de bootstrap paginator.