English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
During an internship at the company, I saw that the company's framework used ligerUI grid for pagination, and I found it quite useful. I explored and implemented it myself and recorded it here
In simple terms, liger grid is to submit prepared data to the specified target request data, and then display it (implemented through AJAX).
ligerGrid is the core control of the ligerui series plug-in, which allows users to quickly create a beautiful and powerful table that supports sorting, pagination, multi-column headers, fixed columns, and more.
Here only the pagination based on ligerUI is implemented
There are two types of pagination methods for LigerUI:localandserver.
If the amount of data is not large, local pagination can be directly adopted, sending all the data to the front-end at once, and then LigerUI's own grid will automatically paginate. Regarding total, when sending jsonString from the backend, send the predefined total (total number of items). You can define as many as you like, but on the front-end, it will automatically assign the total number to total. This is the way it works under local pagination.
If the amount of data is large, it is not recommended to load it all at once, as this may cause the data not to be displayed or to respond very slowly. In this case, server-side pagination is needed. When using server-side pagination, two additional parameters will be sent with each request compared to local pagination: page and pagesize. There is no need to send them yourself, just get them from the backend.
int page = Integer.parseInt(request.getParameter("page"));
int pagesize = Integer.parseInt(request.getParameter("pagesize"));
int total;
At this time, you can write page and pagesize into your sql statement:
sql=".........";
sql+=" limit "+(page*pagesize-pagesize)+","+pagesize;
The results found are placed in jsonString, here attention should be paid to total, total needs to be defined by yourself, and you need to check the total number of results again and assign it to total to pass it to the page. The other LigerUI will help you handle it!
About more ligerUI grid, please refer to the official API http://api.ligerui.com/?to=grid
For reference on choosing frontend pagination or backend pagination, see https://www.oldtoolbag.com/article/86326.htm
localImplementation only requires submitting all query data to the frontend framework, and it will automatically handle pagination. However, I personally do not advocate for client-side pagination, as there is a network between the Web application server and the client. If the amount of data transmitted over the network is less, the client will receive a response faster. Moreover, in general, the processing capabilities of the database server and the Web application server are much stronger than those of the client. From these two points, the client-side pagination solution is the least desirable
Below is the server-side pagination code:
Since only pagination is used, only part of the plugins and images are imported
Introduce the required jquery, liger and 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 example as follows: In ligerGrid, it is necessary to specify dataAction (default is local), request url, page and pageSize, where page and pageSize can be obtained from the backend
<script type="text/javascript" >
$(function(){
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: 'Serial Number',
render:function(record, rowindex, value, column){
return rowindex+1;
}
},
{ name: 'title', display: 'Title'}
],
height:210,
dataAction:"server",
url:"LUServlet",
page:\1\
pageSize:\5"
});
});
</script>
</head>
<body>
<div style="width:600px">
<div id="maingrid"></div>
</div>
Model class and test database
//For convenience, 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 and setter methods
@Override
public String toString() {
return "Blog [id=" + id + ", category_id=" + category_id + ", title="[#1#]", content=" + content
+ ", created_time=" + created_time + "]";
}
}
DAO class, used for jdbc testing
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", "");
}
e.printStackTrace();
}
}
//Returns an array of Blog objects for JSON string concatenation.
//If model is not used, you can directly concatenate the JSON string and return it here.
//The page and pagesize parameters are used to determine the length of the array on the last page; otherwise, an error will occur.
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++;
}
}
e.printStackTrace();
}
if (connect != null)
try {
connect.close();
ps.close();
rs.close();
}
e.printStackTrace();
}
}
return blog;
}
//Get total record count 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
}
}
e.printStackTrace();
}
return total;
}
}
Background servlet implementation
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
//Get the page and pagesize of the page, and use the following sql to concatenate
int page=Integer.valueOf(request.getParameter("page"));
int pagesize=Integer.valueOf(request.getParameter("pagesize"));
MysqlTest test=new MysqlTest();
//When concatenating the JSON string, a total record count is passed to the front-end, and ligerUI grid will automatically obtain the total
int total=test.getTotal();
request.setAttribute("total", total);
//Using MySQL, the limit keyword is used to find a limited number of statements, starting from page*pagesize-Starting from pagesize, retrieve pagesize items
String sql="select * from blog";
sql+=" limit "+(page*pagesize-pagesize)+","+pagesize;
Blog[] blog=test.getInfo(sql,page,pagesize);
//Concatenate data into a JSON string
StringBuffer strbuffer=new StringBuffer();
//{"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);
}
}
Running Result (The default style can be changed, please refer to the ligerUI API for details):
That's all for this article. I hope it will be helpful to everyone's learning and also hope everyone will support the Shouting Tutorial.
Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)