English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Fiz uma estágio na empresa e vi que a estrutura da empresa usava o grid do ligerUI para paginação, achei que era muito útil e explorei para implementar uma vez e registrar
Em termos simples, o liger grid é submeter dados prontos para a solicitação de destino, após obter os dados, mostrá-los (realizado através de ajax).
O ligerGrid é o controle nuclear da série de plugins ligerui, os usuários podem criar rapidamente uma tabela bonita e funcional, que suporta classificação, paginação, cabeçalhos de várias tabelas, colunas fixas, etc.
Aqui apenas implementamos a paginação baseada no LigerUI
Existem dois tipos de métodos de paginação do LigerUI:localeservidor.
Se a quantidade de dados não for grande, pode-se usar diretamente a paginação local, enviar todos os dados de uma vez para a interface do usuário, e então o grid do LigerUI próprio automaticamente fará a paginação. Vamos falar sobre o total, ao enviar jsonString no backend, envie o total definido (quantidade total de linhas), você pode definir quantas quiser, mas ao chegar na interface do usuário, ele automaticamente atribuirá o valor total para o total, isso é o modo local.
Se a quantidade de dados for grande, carregar todos os dados de uma vez pode não exibir os dados ou ser muito lento, então é necessário usar a paginação do servidor. Quando usar a paginação do servidor, cada solicitação enviará dois parâmetros a mais em comparação com a paginação local: page e pagesize. Não é necessário enviar manualmente, apenas obter no backend.
int page = Integer.parseInt(request.getParameter("page"));
int pagesize = Integer.parseInt(request.getParameter("pagesize"));
int total;
Neste momento, você pode incluir page e pagesize na sua consulta sql:
sql=".........";
sql+=" limit "+(page*pagesize-pagesize)+"+pagesize;
Os resultados encontrados são colocados no jsonString, aqui é importante prestar atenção no total, o total deve ser definido por você mesmo, você precisa verificar quantas linhas totais há e atribuir o valor ao total antes de passar para a página, outras funcionalidades do LigerUI ajudarão você a resolver!
Sobre mais informações da API do grid do ligerUI, consulte o site oficial http://api.ligerui.com/?to=grid
Para referência sobre a escolha de paginação no frontend ou no backend, consulte https://pt.oldtoolbag.com/article/86326.htm
localBasta submeter todos os dados de consulta ao frontend framework e ele automaticamente implementará a paginação. No entanto, pessoalmente, não recomendo a paginação no cliente, pois a Web e o servidor são redes. Quanto menos dados sejam transmitidos pela rede, mais rápido será o tempo de resposta do cliente. Além disso, geralmente, a capacidade de processamento do servidor de banco de dados e do servidor da Web é muito maior do que a do cliente. De acordo com esses dois pontos, a solução de paginação no cliente é a menos recomendável
A seguir está o código de paginação no servidor:
Apenas uso de paginação, então apenas importei parte dos plugins e imagens
Inclua o jQuery, liger e css necessários
<link href="js/ligerui-all.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery-3.0.0.js"></script> <script type="text/javascript" src="js/ligerui.all.js"></script>
jsp de exemplo a seguir: Em ligerGrid, é necessário especificar dataAction (padrão é local), URL da solicitação, page e pageSize, onde page e pageSize podem ser obtidos no backend
<script type="text/javascript" >
$(function(){
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: 'Número de ordem',
render:function(record, rowindex, value, column){
return rowindex+1;
}
},
{ name: 'title', display: 'Título'}
],
height:210,
dataAction:"server",
url:"LUServlet",
page:\1",
pageSize:\5"
});
});
</script>
</head>
<body>
<div style="width:600px">
<div id="maingrid"></div>
</div>
Classe model e banco de dados de teste
//Para facilitar, uso sql.Date
import java.sql.Date;
public class Blog {
private int id;
private int category_id;
private String title;
private String content;
private Date created_time;
//getter和setter方法
@Override
public String toString() {
return "Blog [id=" + id + ", category_id=" + category_id + ", title="[#1#]", content=" + content
+ ", created_time=" + created_time + "]";
}
}
dao类，用jdbc测试
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import model.Blog;
public class MysqlTest {
PreparedStatement ps = null;
ResultSet rs = null;
Connection connect = null;
public MysqlTest() {
try {
Class.forName("com.mysql.jdbc.Driver");
connect = DriverManager.getConnection("jdbc:mysql://localhost:3306/blogs_stu", "root", "");
} catch (Exception e) {
e.printStackTrace();
}
}
//返回一个Blog数组，用于拼接json字符串
//不用model时可以直接在此处拼接json字符串返回
//传入page和pagesize用于判断最后一页数组长度，否则会报错
public Blog[] getInfo(String sql,int page,int pagesize) {
int total=getTotal();
if(page*pagesize>=total){
pagesize=total%pagesize;
}
Blog[] blog = new Blog[pagesize];
try {
ps = connect.prepareStatement(sql);
rs = ps.executeQuery();
int index = 0;
enquanto (rs.next()) {
blog[index] = new Blog();
blog[index].setId(rs.getInt("id"));
blog[index].setCategory_id(rs.getInt("category_id"));
blog[index].setTitle(rs.getString("title"));
blog[index].setContent(rs.getString("content"));
blog[index].setCreated_time(rs.getDate("created_time"));
index++;
}
} catch (Exception e) {
e.printStackTrace();
}
se (connect != null)
try {
connect.close();
ps.close();
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
retornar blog;
}
//obter o número total de registros total
public int getTotal() {
int total = 0;
String sql = "";
try {
sql = "select count(id) from blog";
ps = connect.prepareStatement(sql);
rs = ps.executeQuery();
enquanto (rs.next()) {
total = rs.getInt;1);
}
} catch (SQLException e) {
e.printStackTrace();
}
retornar total;
}
}
servlet de back-end implementação
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import model.Blog;
import mysqljdbc.MysqlTest;
@WebServlet("/LUServlet)
public class LUServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
//Obter page e pagesize da página, usar para montar sql
int page = Integer.valueOf(request.getParameter("page"));
int pagesize = Integer.valueOf(request.getParameter("pagesize"));
MysqlTest test = new MysqlTest();
//Ao juntar a string JSON, passar um total de registros ao cliente, o ligerUI grid automaticamente obterá o total
int total = test.getTotal();
request.setAttribute("total", total);
//Usando MySQL, a expressão limitada para buscar um número específico de itens é 'limit', a partir de page*pagesize-começando por pagesize, pegar pagesize itens
String sql = "select * from blog";
sql+=" limit "+(page*pagesize-pagesize)+"+pagesize;
Blog[] blog = test.getInfo(sql, page, pagesize);
//Juntar dados em uma string JSON
StringBuffer strbuffer = new StringBuffer();
//{"Rows":[],"Total":""} é o formato JSON aceito pelo grid ligerUI
strbuffer.append("{\"Rows\":[")}
for(int i=0;i<blog.length;i++{
strbuffer.append("{\"title\":").append("\"" + blog[i].getTitle() + "\"},");
}
strbuffer.replace(strbuffer.length(),-1, strbuffer.length(), ");
strbuffer.append("],").append("\"Total\":").append("\""+total+"\"".append("}");
PrintWriter out=response.getWriter();
out.write(strbuffer.toString());
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
Resultado da execução (o estilo padrão pode ser alterado, consulte o ligerUI API para mais detalhes):
Isso é tudo o que há no artigo, esperamos que ajude no seu aprendizado e que você apoie mais o tutorial de gritaria.
Declaração: O conteúdo deste artigo é de origem na Internet, pertence ao respectivo proprietário, é contribuído e carregado voluntariamente pelos usuários da Internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por questões legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas. Em caso de verificação, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)