springboot之 pagehelper+bootstrap-table插件

最新推荐文章于 2021-10-22 12:15:39 发布

鲸鱼姐

最新推荐文章于 2021-10-22 12:15:39 发布

阅读量1.7k

点赞数 1

分类专栏： bootstrap 文章标签： pagehelper

本文链接：https://blog.csdn.net/zhaolulu916/article/details/93339557

版权

bootstrap 专栏收录该内容

42 篇文章 6 订阅

订阅专栏

效果

1.加入pagehelper和json依赖

        <dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper</artifactId>
			<version>5.1.8</version>
		</dependency>
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
			<version>1.2.10</version>
		</dependency>
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper-spring-boot-starter</artifactId>
			<version>1.2.10</version>
		</dependency>
        <dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>fastjson</artifactId>
			<version>1.2.28</version>
		</dependency>

2. web前台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 核心 css -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <!-- 引入bootstrap-table样式 -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

    <!-- jquery及bootstrapjs -->
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- bootstrap-table.min.js -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

    <!-- 引入中文语言包 -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
    <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>
    <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/extensions/export/bootstrap-table-export.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/extensions/editable/bootstrap-table-editable.js"></script>

</head>
<body>
<div class="container">
    <!-- 如果有条件，查询表单ID名必须为condition-form -->
    <form id="condition-form">
        用户名<input name="name" value="a"> 年龄<input name="age"
                                                  value="1"> <input type="button" value="搜索">
    </form>

    <div id="toolbar">
        <button id="remove" class="btn btn-danger">
            <i class="glyphicon glyphicon-remove"></i> Delete
        </button>
        <button id="add" class="btn btn-primary">
            <i class="glyphicon glyphicon-ok"></i> Insert
        </button>
    </div>
    <!-- 加载bootstraptable的表格，ID名称必须为bootstrap-table -->
    <table id="bootstrap-table">
        <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="id" data-sortable="true">ID</th>
            <th data-field="username" data-sortable="true">姓名</th>
            <th data-field="password" data-sortable="true">密码</th>
            <th data-field="employeeNum">工号</th>
            <th data-field="departmentId">部门</th>
        </tr>
        </thead>
    </table>
</div>
<script>
$("input[type='button']").click(function() {
$("#bootstrap-table").bootstrapTable("refresh")
});

//bootstrap-table初始化
$("#bootstrap-table").bootstrapTable({
url : "pageInfo", //请求后台的URL（*）
dataType:"json",
// 此间是与client不一样的地方=======================开始
contentType : "application/x-www-form-urlencoded",
sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
//修改请求参数，不设置则有默认值 ，返回值必须是一个对象
method : 'POST', //请求方式（*）
toolbar : '#toolbar', //工具按钮用哪个容器
search : false, //是否显示表格搜索
showFooter : false, //显示底部，默认不显示
sortName : 'name',
sortOrder : "asc", //排序方式
// 此间是与client不一样的地方=======================结束

striped : true, //是否显示行间隔色
cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination : true, //是否显示分页（*）
showPaginationSwitch : true, //显示切换分页

showFullscreen : false, //显示全屏
showHeader : true, //显示头部，默认显示
showExport : true, //显示导出
showColumns : true, //是否显示所有的列（选择显示的列）
showRefresh : true, //是否显示刷新按钮
sortable : true, //是否启用排序
pageNumber : 1, //初始化加载第一页，默认第一页,并记录
pageSize : 3, //每页的记录行数（*）
pageList : [ 3, 6, 9 ], //可供选择的每页的行数（*）
queryParams:queryParam,
strictSearch : true,
minimumCountColumns : 2, //最少允许的列数
clickToSelect : true, //是否启用点击选中行
uniqueId : "id", //每一行的唯一标识，一般为主键列
showToggle : true, //是否显示详细视图和列表视图的切换按钮
cardView : false, //是否显示详细视图
detailView : false, //是否显示父子表
});


function queryParam(params){
    	var param = {
    			limit : this.limit, // 页面大小
    	        offset : this.offset, // 页码
    	        pageNumber : this.pageNumber,
    	        pageSize : this.pageSize
    	};
    	return param;
    }
</script>
</body>
</html>

3. Controller

    @ResponseBody
    @RequestMapping(value="pageInfo",produces="html/text;charset=UTF-8")
    public  String pageInfo(@RequestParam int pageNumber,int pageSize,HttpServletResponse response) {
        response.setContentType("text/json");
        System.out.println(pageNumber+"===="+pageSize);
        response.setCharacterEncoding("utf-8");
        
        //userList查询要放到startPage下面
        PageHelper.startPage(pageNumber,pageSize);
        List<User> userList=userMapper.getALLUsers();
        PageInfo<User> page=new PageInfo<>(userList);
          //取出查询结果
        List<User> rows = page.getList();
        int total = (int) page.getTotal();
         //转换为json数据
        JSONObject result = new JSONObject();
        result.put("rows",rows);
        result.put("total",total);
        System.out.println(result.toJSONString());
        return result.toJSONString();
    }

4.mapper

@Mapper
public interface UserMapper {

    @Select("select * from t_user")
    public List<User> getALLUsers();
}

5. bean

public class User {
    private Integer id;
    private String  username;
    private String password;
    private String employeeNum;
    private Integer departmentId;
//get，set方法省略
    }

4. 注意事项——Pagehelper无效解决办法

pagehelper里面的

PageHelper.startPage(1,10);只对该语句以后的第一个查询语句得到的数据进行分页

就算你在PageInfo pa = new PageInfo("",对象);语句里面的对象是写的最终得到的数据,该插件还是只会对第一个查询所查询出来的数据进行分页

第一个查询语句是指什么呢?举个例子吧,比如你有一个查询数据的方法,写在了PageHelper.startPage(1, 10);下面.但是这个查询方法里面包含两个查询语句的话,该插件就只会对第一查询语句查询的数据进行分页,而不是对返回最终数据的查询与基础查询出来的数据进行分页

举例

（1）正确的写法

PageHelper.startPage(pageNumber,pageSize);
List<User> userList=userMapper.getALLUsers();

（2）错误的写法
List<User> userList=userMapper.getALLUsers();

PageHelper.startPage(pageNumber,pageSize)；

鲸鱼姐

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
springboot之 pagehelper+bootstrap-table插件

效果1.加入pagehelper和json依赖 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.8</version&...
复制链接

扫一扫