English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
En la práctica en la empresa, vi que el framework de la empresa utilizaba el grid de ligerUI para la paginación y personalmente lo encontré bastante útil, así que lo implementé y registré
En términos simples, liger grid es enviar datos preparados a la solicitud de destino, obtener los datos y mostrarlos (a través de ajax).
ligerGrid es el controlador nuclear de la serie de plugins ligerui, los usuarios pueden crear rápidamente una tabla hermosa y potente, que admite ordenamiento, paginación, múltiples encabezados, columnas fijas, etc.
Aquí solo se implementa la paginación basada en ligerUI
LigerUI tiene dos formas de paginación:localyservidor.
Si la cantidad de datos no es grande, se puede usar directamente la paginación local, enviando todos los datos de manera directa al frontend y luego el grid de LigerUI se paginará automáticamente. En cuanto a total, al transmitir jsonString en el backend, se debe transmitir el total definido (número total de registros). Puede definirse cuánto quiera, pero en el frontend se asignará automáticamente el número total a total, esto es el método de local.
Si la cantidad de datos es grande, no se mostrarán los datos de manera directa ni se responderá lentamente, por lo que es necesario usar la paginación del servidor. Cuando se usa la paginación del servidor, cada solicitud enviará dos parámetros adicionales en comparación con la paginación local: page y pagesize. No es necesario enviarlos por sí mismo, solo necesita obtenerlos en el backend.
int page = Integer.parseInt(request.getParameter("page"));
int pagesize = Integer.parseInt(request.getParameter("pagesize"));
int total;
En este momento, puede escribir page y pagesize en su consulta sql:
sql=".........";
sql+=" limit "+(page*pagesize-pagesize)+"",+pagesize;
Los resultados encontrados se deben放入jsonString， aquí hay que prestar atención a total，total debe definirse por sí mismo y se debe buscar el número total de resultados nuevamente y asignar su valor a total para transmitirlo a la página，otras funciones de LigerUI lo resolverán por usted!
Acerca de más información sobre el grid de ligerUI, consulte la API en el sitio web oficial http://api.ligerui.com/?to=grid
Para referirse a la elección de la paginación en el cliente o en el servidor, consulte https://es.oldtoolbag.com/article/86326.htm
localPara implementar, solo necesita enviar todos los datos de la consulta al lado del cliente, y el framework lo ayudará a implementar la paginación automáticamente. Sin embargo, personalmente no recomiendo la paginación en el cliente, ya que la comunicación entre el servidor de aplicaciones web y el cliente es una red. Si se transmite una menor cantidad de datos en la red, el cliente obtendrá una respuesta más rápida. Además, generalmente, la capacidad de procesamiento del servidor de bases de datos y el servidor de aplicaciones web es mucho mayor que la del cliente. En vista de estos dos puntos, el esquema de paginación en el cliente es el menos recomendable
A continuación, el código de paginación en el servidor:
Debido a que solo se utiliza la paginación, se han importado solo parte de los complementos e imágenes
Incorporar los jquery, liger y css necesarios
<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 con ejemplo a continuación: En ligerGrid se debe especificar dataAction (por defecto es local), la url de solicitud, page y pageSize, donde page y pageSize se pueden obtener en el servidor
<script type="text/javascript" >
$(function(){
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: 'Número de secuencia',
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>
Clase de modelo y base de datos de prueba
//Para facilitar, use 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;
while (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();
}
if (connect != null)
try {
connect.close();
ps.close();
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
devuelve blog;
}
//obtener el 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();
while (rs.next()) {
total = rs.getInt;1);
}
} catch (SQLException e) {
e.printStackTrace();
}
devuelve total;
}
}
servlet de fondo implementación
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");
//Obtener page y pagesize de la página, usar para concatenar sql
int page = Integer.valueOf(request.getParameter("page"));
int pagesize = Integer.valueOf(request.getParameter("pagesize"));
MysqlTest test = new MysqlTest();
//Al concatenar la cadena JSON, se envía un total de registros al usuario final, ligerUI grid lo obtendrá automáticamente
int total = test.getTotal();
request.setAttribute("total", total);
//Utiliza MySQL, la sentencia de búsqueda limitada se usa con limit, desde page*pagesize-comienza en pagesize, toma pagesize filas
String sql = "select * from blog";
sql+=" limit "+(page*pagesize-pagesize)+"",+pagesize;
Blog[] blog = test.getInfo(sql, page, pagesize);
//Concatenar los datos en una cadena JSON
StringBuffer strbuffer = new StringBuffer();
//{"Rows":[],"Total":""} es el formato JSON aceptado por ligerUI grid
strbuffer.append("{\"Rows\":[");
for(int i=0;i
Resultado de ejecución (el estilo predeterminado se puede cambiar, consulte específicamente ligerUI API):
Esto es todo el contenido del artículo, espero que ayude a su aprendizaje y que todos los ayuden a apoyar el tutorial de grito.
Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga espontáneamente por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha editado manualmente y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.