English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Во время практики в компании я увидел, что в их рамке используется ligerUI grid для pagination, на мой взгляд, это очень удобно, я сам пытался реализовать это и записал
Проще говоря, liger grid - это передача подготовленных данных на указанный целевой запрос данных, после получения данных они отображаются (через ajax).
ligerGrid является ядром плагина из серии ligerui, с помощью которого пользователи могут быстро создать красивый и функционально мощный таблицы, поддерживающие сортировку, pagination, многоуровневые заголовки, фиксированные столбцы и т.д.
Здесь реализована pagination на основе ligerUI
У LigerUI есть два способа pagination:localиserver.
Если объем данных не велик, то можно напрямую использовать local pagination, отправить все данные сразу на переднюю панель, а затем grid LigerUI автоматически выполнит pagination. Что касается total, при передаче jsonString на сервере передается определенный total (общее количество), вы можете определить его сколько угодно, но на передней панели он автоматически будет присвоен total, это способ local.
Если объем данных большой, и данные загружаются сразу, то данные не отображаются или отставание в ответе будет большим, в этом случае нужно использовать server pagination. При использовании server pagination, при каждом запросе будет отправлено на два параметра больше, чем при 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, передать его на страницу. Остальное LigerUI поможет вам решить!
О более подробной информации о ligerUI grid смотрите в официальном API http://api.ligerui.com/?to=grid
О выборе frontend pagination или backend pagination см. https://ru.oldtoolbag.com/article/86326.htm
localРеализация заключается в том, чтобы отправить все данные запроса на передний фреймворк, и он автоматически поможет вам реализовать pagination, но я не рекомендую использовать pagination на клиенте, так как между сервером Web-приложения и клиентом есть сеть. Если объем передаваемых данных в сети меньше, то клиент получает ответы быстрее. 而且, как правило, обработочная способность сервера базы данных и сервера Web-приложения обычно сильнее, чем у клиента. С этих двух точек зрения, использование pagination на клиенте является наименее предпочтительным вариантом
Ниже приведен пример кода pagination на сервере:
Так как используется только pagination, были импортированы только часть плагинов и изображений
Включены необходимые 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>
класс модели и тестовая база данных
// для удобства используется 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;
}
//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);
}
} catch (SQLException e) {
e.printStackTrace();
}
return total;
}
}
backend 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");
//获取页面的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();
//ligerUI grid接受的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);
}
}
Результат выполнения (стиль по умолчанию можно изменить, подробности см. в ligerUI API):
Вот весь контент статьи, надеюсь, он поможет вам в изучении, также希望大家多多支持呐喊教程。
Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями Интернета, самостоятельно загружен, сайт не имеет права собственности, не был отредактирован вручную и не несет ответственности за соответствующие юридические последствия. Если вы обнаружите содержимое,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма, пожалуйста, замените # на @) для жалоб и предоставьте соответствующие доказательства. Если будет подтверждено, сайт немедленно удалит涉嫌侵权的内容。