English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
회사에서 인턴십을 하면서 회사 프레임워크에서 ligerUI grid를 사용하여 페이지네이션을 구현한 것을 보고, 개인적으로 매우 유용하다고 생각했습니다. 자신의 조사를 통해 구현한 것을 기록했습니다
간단히 말해서, liger grid는 준비된 데이터를 지정된 목적지 요청 데이터에 전달하고, 데이터를 얻은 후에 표시합니다（ajax를 통해 구현）。
ligerGrid는 ligerui 시리즈 플러그인의 핵심 컨트롤이며, 사용자는 아름다운 외관과 강력한 기능을 갖춘 테이블을 빠르게 생성할 수 있습니다. 정렬, 페이지네이션, 다중 헤더, 고정 열 등을 지원합니다.
여기서는 ligerUI 기반의 페이지네이션만 구현합니다
LigerUI의 페이지네이션 방식은 두 가지가 있습니다：local와서버.
如果数据量不是很大，就直接采用local分页，一次性的把数据全部发送到前台来，之后LigerUI自身的grid会自动分页。说一下 total，在后台传送jsonString时传送定义好的total（总条数），你可以定义多少都可以，但是到前台它会自动将总条数赋值给total， 这是local下的方式。
而如果数据量很大，一次性加载直接不显示数据或反应很慢的，就需要用server分页了，当用server分页时，每次请求都会比local时多发送两个参数：page和pagesize，不需要自己去发送，只需要在后台获取就行。
int page=Integer.parseInt(request.getParameter("page"));
int pagesize=Integer.parseInt(request.getParameter("pagesize"));
int total;
这时你可以把page和pagesize写进你的sql语句：
sql=".........";
sql+=" limit "+(page*pagesize-pagesize)+"+pagesize;
这样查出的结果放入jsonString中，这里要注意total了，total需要自己定义，需要自己重新查一下结果的总条数后赋值给total传到页面，其他的LigerUI会帮你搞定！
更多ligerUI grid参考资料请参考官网API http://api.ligerui.com/?to=grid
프론트엔드 페이징과 백엔드 페이징을 선택하는 데 대한 참고: https://ko.oldtoolbag.com/article/86326.htm
local실제로는 모든 데이터를 전송하고, 프론트엔드 프레임워크가 자동으로 페이징을 처리해줍니다. 하지만 저는 클라이언트 쪽 페이징을 권장하지 않습니다. 웹 애플리케이션 서버와 클라이언트 간에는 네트워크가 있으며, 네트워크를 통해 전송되는 데이터량이 적을수록 클라이언트가 응답을 받는 속도가 빨라집니다. 그리고 일반적으로 데이터베이스 서버와 웹 애플리케이션 서버의 처리 능력은 클라이언트보다 훨씬 강력합니다. 이 두 가지를 고려할 때, 클라이언트 쪽 페이징은 가장 비효율적인 방법입니다.
서버 쪽 페이징 코드는 다음과 같습니다:
페이징만 사용했기 때문에 일부 플러그인과 이미지만 포함되었습니다.
필요한 jquery, liger, 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에서의 예제는 다음과 같습니다. ligerGrid에서 dataAction(기본적으로 local)를 지정하고, 요청의 url, page, pageSize를 지정해야 합니다. page와 pageSize는 백엔드에서 가져올 수 있습니다.
<script type="text/javascript" >
$((function(){
var grid = $("#maingrid").ligerGrid({
columns: [
{ name: 'id', display: '순번',
render:function(record, rowindex, value, column){
return rowindex+1;
}
},
{ name: 'title', display: '제목'}
],
height:210,
dataAction:"server",
url:"LUServlet",
page:\1",
pageSize:\5"
});
});
</script>
</head>
<body>
<div style="width:600px">
<div id="maingrid"></div>
</div>
model 클래스와 테스트 데이터베이스
//용량을 절약하기 위해 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();
}
}
//json 문자열을 연결하기 위해 사용할 Blog 배열을 반환합니다
//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();
}
}
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");
//페이지의 page와 pagesize를 가져오고, sql을 연결하는 데 사용합니다.
int page=Integer.valueOf(request.getParameter("page"));
int pagesize=Integer.valueOf(request.getParameter("pagesize"));
MysqlTest test=new MysqlTest();
//JSON 문자열을 연결하는 동안, 전면에 전체 기록 수인 total을 전달하면, ligerUI grid가 자동으로 해당 total을 가져옵니다.
int total=test.getTotal();
request.setAttribute("total", total);
//MySQL을 사용하여, 제한된 개수를 찾는 구문을 사용합니다. limit, page*pagesize-pagesize 개 시작하여 pagesize 개를 가져옵니다.
String sql="select * from blog";
sql+=" limit "+(page*pagesize-pagesize)+"+pagesize;
Blog[] blog=test.getInfo(sql,page,pagesize);
//데이터를 JSON 문자열로 연결합니다.
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);
}
}
실행 결과（기본 스타일을 변경할 수 있습니다. ligerUI API를 참조하십시오）：
이것이 이 문서의 전체 내용입니다. 많은 도움이 되길 바랍니다. 또한,呐喊 가이드를 많이 지지해 주시길 바랍니다.
고지사항: 이 문서의 내용은 인터넷에서 가져왔으며, 원저자에게 소유권이 있습니다. 인터넷 사용자가 자발적으로 기여하고 업로드한 내용이며, 이 사이트는 소유권을 가지지 않으며, 인공적으로 편집되지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 위반 내용이 있음을 발견하면, 이메일을 notice#w로 발송하여 주십시오.3codebox.com（이메일을 보내면, #을 @으로 변경하십시오. 신고를 해 주시고 관련 증거를 제공하시면, 해당 내용이 사실로 확인되면, 이 사이트는 즉시 위반 내용을 삭제합니다。）