layui 資料表格的前後端互動
阿新 • • 發佈：2019-02-01
前端jsp的頁面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>layui</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="<%=basePath%>js/layui/css/layui.css" media="all"> <!-- 注意：如果你直接複製所有程式碼到本地，上述css路徑需要改成你本地的 --> </head> <body> <table class="layui-hide" id="test"></table> <script src="<%=basePath%>js/layui/layui.js" charset="utf-8"></script> <!-- 注意：如果你直接複製所有程式碼到本地，上述js路徑需要改成你本地的 --> <script> layui.use(['form','layer','table'], function(){ var table = layui.table ,form = layui.form,$=layui.$; table.render({ elem: '#test' //繫結table id ,url:'/lightnote/informa/findallEmp' //資料請求路徑 ,cellMinWidth: 80 ,cols: [[ {field:'id', width:200, title: 'ID', sort: true} ,{field:'enterprise', width:180, title: '企業名稱'} ,{field:'establishment', width:120, title: '成立時間', sort: true} ,{field:'registration', width:100, title: '註冊地'} ,{field:'registered', width:100, title: '註冊資金', minWidth: 100} //minWidth：區域性定義當前單元格的最小寬度，layui 2.2.1 新增 ,{field:'number', width:100, title: '總人數', sort: true} ,{field:'socialSecurity', width:100, title: '社保人數', sort: true} ,{field:'research', width:100, title: '研發人數'} ,{field:'registrationType', width:150, title: '註冊型別', sort: true} ,{field:'operation', width:200, title: '經營範圍'} ,{field:'product', width:200, title: '主營產品', sort: true} ,{fixed: 'right',title: '操作', width:180, align:'center', toolbar: '#toolBar'}//一個工具欄 具體請檢視layui官網 ]] ,page: true //開啟分頁 ,limit:10 //預設十條資料一頁 ,limits:[10,20,30,50] //資料分頁條 ,id: 'testReload' }); }); </script> </body> </html>
後端controller的程式碼
@RequestMapping(value="findallEmp",produces="text/html;charset=utf-8")
public @ResponseBody String findallEmp( int page, int limit){
int before = limit * (page - 1) + 1;
int after = page * limit;
//帶引數從資料庫裡查詢出來放到eilist的集合裡
List<Information> eilist = informationService.findAllPage(before, after);
int count = informationService.count();
//用json來傳值
JSONArray json = JSONArray.fromObject(eilist);
String js = json.toString();
//*****轉為layui需要的json格式，必須要這一步，博主也是沒寫這一步，在頁面上資料就是資料介面異常
String jso = "{\"code\":0,\"msg\":\"\",\"count\":"+count+",\"data\":"+js+"}";
return jso;
}serviceimpl的程式碼
/**
* 查詢資料
*/
public List<Information> findAllPage(int before,int after){
return informationDao.findAllPage(before, after);
}
/**
* 查詢條數
*/
public int count(){
return informationDao.count();
}service的介面
public List<Information> findAllPage(int before,int after); public int count();
dao的介面
public List<Information> findAllPage(@Param("before") int before,@Param("after") int after);
public int count();mapper的sql語句
<select id="findAllPage" resultMap="Information">
select id,enterprise,establishment,registration, registered,number,
social_security as socialSecurity,research, registration_type as registrationType,
operation, product ,isdelete from information LIMIT #{before},#{after}
</select>
<select id="count" resultMap="int">
select count(*) from information
</select>mapper中實體類和資料庫的欄位不一致時，必須registration_type as registrationType這樣寫上去，否則後臺controller呼叫介面的時候沒有資料。
Layui 的工具類
public class Layui extends HashMap<String, Object> {
public static Layui data(Integer count,List<?> data){
Layui r = new Layui();
r.put("code", 0);
r.put("msg", "");
r.put("count", count);
r.put("data", data);
return r;
}
}
最後查詢出來的頁面
至此用layui分頁查詢就差不多完成了
layui的修改，刪除可看點選開啟連結