English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Durante l'internato in azienda, ho visto che il framework aziendale utilizza ligerUI grid per la paginazione, e trovo che sia molto utile, quindi ho sperimentato e implementato personalmente e registrato.
In breve, liger grid è il processo di invio dei dati pronti a una destinazione specifica per richiedere dati, ottenere i dati e poi mostrarli (realizzato tramite AJAX).
ligerGrid è il controllo di core della serie di plugin ligerui, che consente agli utenti di creare rapidamente una griglia esteticamente piacevole e funzionalmente potente, che supporta ordinamento, paginazione, multi-capo, colonne fisse, ecc.
In questo esempio viene implementata solo la paginazione basata su LigerUI
Ci sono due tipi di modalità di paginazione di LigerUI:localeserver.
Se la quantità di dati non è molto grande, utilizzare direttamente la paginazione local, inviando tutti i dati in una volta al frontend. Dopo di che, il grid di LigerUI eseguirà automaticamente la paginazione. Parlando di total, quando si trasmette jsonString dal backend, trasmettere il total definito (numero totale di record). Puoi definire quante ne vuoi, ma il frontend li assegnerà automaticamente al total, questo è il modo di local.
Se la quantità di dati è molto grande, non caricare i dati in una volta o il caricamento sarà molto lento, in questo caso è necessario utilizzare la paginazione server-side. Quando si utilizza la paginazione server-side, ogni richiesta invierà due parametri in più rispetto a quando si utilizza local: page e pagesize. Non è necessario inviarli manualmente, è sufficiente ottenerli dal backend.
int page = Integer.parseInt(request.getParameter("page"));
int pagesize = Integer.parseInt(request.getParameter("pagesize"));
int total;
In questo momento, puoi scrivere page e pagesize nella tua query SQL:
sql=".........";
sql+=" limit "+(page*pagesize-pagesize)+","+pagesize;
I risultati trovati vengono inseriti in jsonString, qui è importante notare total, che deve essere definito manualmente. Devi cercare di nuovo il numero totale di risultati e assegnarlo a total prima di inviarlo alla pagina. L'altro LigerUI ti aiuterà a gestirlo!
Per ulteriori informazioni sull'API di ligerUI grid, consulta il sito ufficiale http://api.ligerui.com/?to=grid
Per informazioni su come scegliere la paginazione frontend o backend, consulta https://it.oldtoolbag.com/article/86326.htm
localL'implementazione richiede solo di inviare tutti i dati di ricerca all'interno del framework frontend, che implementerà automaticamente la paginazione. Tuttavia, non consiglio la paginazione client-side, poiché il server Web e il client sono connessi tramite una rete. Più dati vengono trasmessi sulla rete, più l'utente finale riceve una risposta più lenta. Inoltre, di solito, la capacità di elaborazione del server database e del server Web è molto superiore a quella del client. Da questi due punti di vista, il piano di paginazione client-side è il meno desiderabile.
Di seguito è riportato il codice di pagination del server:
Poiché è stato utilizzato solo il pagination, sono stati inclusi solo parte dei plugin e delle immagini
Includere i necessari jquery, liger e css
<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 di esempio: nel ligerGrid è necessario specificare dataAction (predefinito in local), l'URL della richiesta, page e pageSize, dove page e pageSize possono essere recuperati dal lato server
<script type="text/javascript" >
$(function(){
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: 'Numero di sequenza',
render:function(record, rowindex, value, column){
return rowindex+1;
}
},
{ name: 'title', display: 'Titolo'}
],
height:210,
dataAction:"server",
url:"LUServlet",
page:"1",
pageSize:"5"
});
});
</script>
</head>
<body>
<div style="width:600px">
<div id="maingrid"></div>
</div>
model classe e database di test
//Per comodità si utilizza 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();
} finally {
if (connect != null)
try {
connect.close();
ps.close();
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
return blog;
}
//获取总记录数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();
}
return total;
}
}
servlet后台实现
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");
// Ottieni i parametri page e pagesize della pagina, usa questi per costruire SQL
int page=Integer.valueOf(request.getParameter("page"));
int pagesize=Integer.valueOf(request.getParameter("pagesize"));
MysqlTest test=new MysqlTest();
//Quando si concatena la stringa JSON, si passa un totale di record alla parte frontale, ligerUI grid lo prenderà automaticamente
int total=test.getTotal();
request.setAttribute("total", total);
//Usa MySQL, la sintassi per limitare il numero di righe è limit, inizia da (page*pagesize-pagesize) e prende pagesize righe
String sql="select * from blog";
sql+=" limit "+(page*pagesize-pagesize)+","+pagesize;
Blog[] blog=test.getInfo(sql,page,pagesize);
//Combina i dati in una stringa JSON
StringBuffer strbuffer=new StringBuffer();
//ligerUI grid accetta il formato JSON {\"Rows\":[],\"Total\":\"\"}
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);
}
}
Risultato dell'esecuzione (è possibile modificare lo stile predefinito, si prega di fare riferimento all'API di ligerUI):
Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento, e ti preghiamo di supportare e gridare le lezioni.
Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright è dell'autore originale, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, il sito web non detiene i diritti di proprietà, non è stato elaborato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, il sito web eliminerà immediatamente il contenuto sospetto di violazione del copyright.