- layui的table分页用于的场景是数据成千上万太多时，可以对数据进行分页展示。
- 首先展示一下效果图(只有两条数据数据库中，仅仅是为了测试这个layui的table分页)
- 首先要做的准备是json的jar包，以及jackson的jar包，大家如果没有的话可以去maven上下载。
- 然后需要要进行下载的是layui的js和css文件，直接去官网下载就可以。需要在页面中加入自己的js和css文件的位置。
• <link rel="stylesheet" href="layui/css/layui.css" media="all">
• <script src="layui/layui.js" charset="utf-8"></script>
<script src="js/jquery.min.js" charset="utf-8"></script>
- 接下来废话不多说，就直接上代码吧！
- 测试的jsp界面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
</body>
<script src="layui/layui.js" charset="utf-8"></script>
<script src="layui/layui.all.js" charset="utf-8"></script>
<script src="js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#test'//获取存放数据的table容器，即是table的id
,height: 515
,method:'post'
,cache:false //清除缓存
,url: 'MessageServlet?method=layuifind' //数据接口，最终传值数据到jsp的方法
,page: true //开启分页
,cols: [[ //表头
{field: 'companyname', title: '用户名', width:300,sort: true}
,{field: 'contacts', title: '联系人', width:300,sort: true}
,{field: 'comaddress', title: '地址', width: 177,sort: true}
]]
});
});
</script>
</html>
//field中的sort属性是是否可以对数据进行排序根据相应的属性
代码中的url是进行数据交互的数据接口。接下来是后台操作的代码。
数据接口MessageServlet？layuifind（写你自己的数据接口，也就是进行数据交互的servlet）：
package com.servlet;
import java.io.IOException;
import java.io.StringReader;
import java.sql.SQLException;
import java.util.List;
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 com.service.JsonUtils;
import com.service.MessageService;
import User.Users;
import User.userInfo;
import User.usermess;
import jdk.nashorn.internal.scripts.JS;
import net.sf.json.JSON;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.util.JSONUtils;
@WebServlet("/MessageServlet")
public class MessageServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* 方法选择
*/
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String method = req.getParameter("method");
if ("layuifind".equals(method)) {
try {
layuifind(req,resp);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
//
//
}
private void layuifind(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException, SQLException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//即是点击事件，获取点击跳转的页数，以及每页需要展示的数据 数目，第一次加载默认为page=1&&limit=10
int page =Integer.parseInt(req.getParameter("page"));
int limit =Integer.parseInt(req.getParameter("limit"));
//封装的要传回给前台的数据类
Users r=new Users();
//向前端传回状态码 0为正常状态码
r.setCode(0);
r.setMsg("获得数据成功");
//所有的数据数目，并不是单单一页展示的数目
r.setCount(MessageService.getlayuiinfo(page, limit).size());
//传递的数据集
r.setData(MessageService.getlayuiinfo(page, limit));
//加载处理 可有可无，并不影响
delay();
//向前端传递数据并显示
resp.getWriter().print(JsonUtils.toJson(r));
//System.out.println(JsonUtils.toJson(r));
}
public void delay(){
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
封装的需要像前端传输的数据类
package User;
public class Users {
/**响应编码*/
private int code;
/**响应消息*/
private String msg;
/**数据总量*/
private int count;
/**数据*/
private Object data;
public Users() {
}
public Users(int code, String msg, int count, Object data) {
super();
this.code = code;
this.msg = msg;
this.count = count;
this.data = data;
}
@Override
public String toString() {
return "R [code=" + code + ", msg=" + msg + ", count=" + count + ", data=" + data + "]";
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
}service，执行查询操作的类
package com.service;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import com.connect.Connect;
import com.sun.org.apache.bcel.internal.generic.Select;
import User.userInfo;
import User.usermess;
//服务层
public class MessageService {
//测试layui
public static List<userInfo> getlayuiinfo(int page,int limit) throws SQLException {
// 查询语句的执行结果为一个表格，即多个学生对象的集合，所有可以创建数组列表对象来存储
List<userInfo> lst = new ArrayList<userInfo>();
// 获取连接对象
Connection conn = Connect.getConn();
String sql="select * from information ";
try {
// 连接对象conn调用createStatement()方法，创建一个执行SQL语句的对象st
Statement st = conn.createStatement();
// 执行SQL语句的对象st调用executeQuery()方法，执行查询语句，将查询到的结果返回到一个结果集中
ResultSet rs = st.executeQuery(sql);
// 遍历结果集对象
while (rs.next()) {
userInfo mes = new userInfo();
mes.setCompanyname(rs.getString("companyname"));
mes.setComaddress(rs.getString("comaddress"));
mes.setComwebsite(rs.getString("comwebsite"));
mes.setEmail(rs.getString("email"));
mes.setLawperson(rs.getString("lawperson"));
mes.setPostal(rs.getString("postal"));
mes.setContacts(rs.getString("contacts"));
mes.setPhone(rs.getString("phone"));
mes.setFax(rs.getString("fax"));
mes.setInsattr(rs.getString("insattr"));
mes.setBelongcom(rs.getString("belongcom"));
mes.setSummary(rs.getString("summary"));
mes.setTechname(rs.getString("techname"));
mes.setTechchat(rs.getString("techchat"));
mes.setDiscuss(rs.getString("discuss"));
mes.setSubject(rs.getString("subject"));
mes.setDomain(rs.getString("domain"));
mes.setVocation(rs.getString("vocation"));
mes.setTogemodern(rs.getString("togemodern"));
mes.setTogecom(rs.getString("togecom"));
mes.setStatus(rs.getString("status"));
mes.setMoney(rs.getString("money"));
lst.add(mes);
}
} catch (Exception e) {
System.out.println(e.getMessage());
} finally {
// 资源使用完之后，如果没有关闭，则需要关闭
if (conn != null) {
conn.close();
}
}
//从所有的数据对象lst找出需要展示的数据存在一个新的list中
List<userInfo> list = new ArrayList<>();
int start=(page-1)*limit;//判断当前也开始的数据位置
for (int i =start; i <start+limit&&i<lst.size(); i++) {
list.add(lst.get(i));
}
return list;
}
}需要将users响应数据类的对象转json数组存储
package com.service;
import java.text.SimpleDateFormat;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
public class JsonUtils {
/**
* 序列化成json
* */
public static String toJson(Object obj) {
// 对象映射器
ObjectMapper mapper = new ObjectMapper();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd HH:mm:ss");
mapper.setDateFormat(sdf);
String result = null;
// 序列化user对象为json字符串
try {
result = mapper.writeValueAsString(obj);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return result;
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
