> 文章列表 > Mybatis-Plus,bootstrap-table,springboot,分页页面不显示数据的问题

Mybatis-Plus,bootstrap-table,springboot,分页页面不显示数据的问题

Mybatis-Plus,bootstrap-table,springboot,分页页面不显示数据的问题

前端代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head><title>用户列表</title><!-- Jquery --><script src="${ctx}/static/jquery/jquery-1.11.3.min.js" type="text/javascript"></script><!-- Bootstrap --><link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/><script src="${ctx}/static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script><!-- Bootstrap table --><link href="${ctx}/static/bootstrap-table/css/bootstrap-table.min.css" rel="stylesheet"/><script src="${ctx}/static/bootstrap-table/js/bootstrap-table.min.js" type="text/javascript"></script><script src="${ctx}/static/bootstrap-table/js/bootstrap-table.min.js" type="text/javascript"></script><script src="${ctx}/static/bootstrap-table/js/locale/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
</head>
<body><div class="container"><div class="row"><div class="col-lg-8"><br/><div class="panel panel-default"><!-- 展示的table列表 --><table id="dataTable"></table></div></div></div></div><script>$(function () {//1.初始化Tablevar oTable = new TableInit();oTable.Init();})var TableInit = function () {var oTableInit = new Object();//初始化TableoTableInit.Init = function () {$('#dataTable').bootstrapTable({method: 'post',url: dataUrl,dataType: "json",striped: true,     //使表格带有条纹pagination: true,    //在表格底部显示分页工具栏pageSize: 10,pageNumber: 1,pageList: [10, 20, 50, 100, 200, 500],idField: "id",  //标识哪个字段为id主键showToggle: false,   //名片格式cardView: false,//设置为True时显示名片(card)布局showColumns: true, //显示隐藏列  showRefresh: true,  //显示刷新按钮singleSelect: true,//复选框只能选择一条记录search: false,//是否显示右上角的搜索框clickToSelect: true,//点击行即可选中单选/复选框sidePagination: "server",//表格分页的位置queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求toolbar: "#toolbar", //设置工具栏的Id或者classcolumns: dataColumns, //列silent: true,  //刷新事件必须设置formatLoadingMessage: function () {return "请稍等,正在加载中...";},formatNoMatches: function () {  //没有匹配的结果return '无符合条件的记录';},onLoadSuccess: function () {},onLoadError: function (data) {//$('#reportTable').bootstrapTable('removeAll');},onClickRow: function (row) {//window.location.href = "/qStock/qProInfo/" + row.ProductId;},responseHandler: function(res) {if(res.code == 1){return {"total": res.data.total,//总页数"rows": res.data.rows   //数据};}}});};//得到查询的参数oTableInit.queryParams = function (params) {return dataQueryParams(params);};return oTableInit;};var dataUrl = "${ctx}/sys/user/getUserList";var dataColumns = [{field: 'id',title: '序号'}, {field: 'loginName',title: '登录名'},  {field: 'userName',title: '用户姓名'}, {field: 'mobile',title: '手机号'}];function dataQueryParams(params) {return {_size: params.limit,  //页面大小_index: params.offset, //页码};}/*** 日期格式化* @param time* @returns {*}*/function formatDate(time) {if (time == '' || time == null || time == undefined) return '';var datetime = new Date();datetime.setTime(time);var year = datetime.getFullYear();var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();var hour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();var minute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();var second = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();return year + "年" + month + "月" + date + "日 " + hour + ":" + minute + ":" + second;}</script>
</body>
</html>

服务端代码

 @ResponseBody@RequestMapping("/getUserList")public AjaxResult getUserList() {Page<User> page = getPage();page = userService.selectPage(page, null);Map<String, Object> resObj = new HashMap<String, Object>();resObj.put("total", page.getTotal());resObj.put("rows", page.getRecords());return json(resObj);}public AjaxResult json(Object data) {return new AjaxResult().success(data);}

AjaxResult对象

public class AjaxResult {// 返回状态码   (默认1:成功,其它:失败)private int code = 1;// 返回的中文消息private String message;// 成功时携带的数据private Object data;public int getCode() {return code;}public AjaxResult setCode(int code) {this.code = code;return this;}public String getMessage() {return message;}public AjaxResult setMessage(String message) {this.message = message;return this;}public Object getData() {return data;}public AjaxResult setData(Object data) {this.data = data;return this;}public AjaxResult addSuccess(String message) {this.message = message;this.code = 1;this.data = null;return this;}public AjaxResult addError(String message) {this.message = message;this.code = 999;this.data = null;return this;}public AjaxResult addFail(String message) {this.message = message;this.code = 999;this.data = null;return this;}public AjaxResult addWarn(String message) {this.message = message;this.code = 333;this.data = null;return this;}public AjaxResult success(Object data) {this.message = "success";this.data = data;this.code = 1;return this;}public boolean isSuccess() {return getCode() == 1;}@Overridepublic String toString() {return JSON.toJSONString(this);}

maven

<!-- Mybatis-Plus --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus</artifactId><version>2.0.9</version></dependency>

**

注意事项

**
Page selectPage(Page page, Wrapper wrapper); 是Mybatis-Plus内置的方法

返回的数据,必须有total和rows,前后数据不一致

responseHandler: function(res) {if(res.code == 1){return {"total": res.data.total,//总页数"rows": res.data.rows   //数据};}}