基于jQuery ligerUI實現分頁樣式

2019-11-20 08:57:31

字體：大中小

來源：轉載

供稿：網友

在公司實習看到公司框架里使用了ligerUI的grid進行分頁，個人感覺挺好用的，自己摸索著實現了一遍記錄下來

簡單來說，liger grid 就是提交準備好的數據到指定的目標請求數據，拿到數據以后，顯示出來（通過ajax實現）。

ligerGrid是ligerui系列插件的核心控件，用戶可以快速地創建一個美觀,而且功能強大的表格,支持排序、分頁、多表頭、固定列等等。

這里只實現基于ligerUI的分頁

LigerUI的分頁方式有兩種：local和server。

如果數據量不是很大，就直接采用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
關于選擇前端分頁還是后臺分頁參考//m.survivalescaperooms.com/article/86326.htm

local實現只需要將查詢的數據全部提交到前端框架會自動幫你實現分頁，但是我個人并不提倡進行客戶端分頁，Web應用服務器和客戶端之間是網絡,如果網絡傳遞的數據量越少,則客戶端獲得響應的速度越快.而且一般來說,數據庫服務器和Web應用服務器的處理能力一般比客戶端要強很多.從這兩點來看,在客戶端分頁的方案是最不可取的

下面上server端分頁代碼：

由于只使用了分頁所以只導入了部分插件和圖片

引入需要的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.Dateimport 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=" + title + ", 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");  //獲取頁面的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）：