SSM框架下的分页显示

最新推荐文章于 2023-01-01 19:34:23 发布

No上善若水

最新推荐文章于 2023-01-01 19:34:23 发布

阅读量1.5k

点赞数 4

分类专栏：前端 java 文章标签： java html

本文链接：https://blog.csdn.net/qq_41369374/article/details/104370817

版权

java 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

在一般的系统中，常常会用到分页显示，这里介绍的是使用boostrap-table和pagehelper来实现分页显示。
系统框架是SSM。
后台：
1、导入jar包：
在这里插入图片描述

  <dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper</artifactId>
    <version>5.1.4</version>
  </dependency>

ps：版本可以改成最新的。
2、配置拦截器到spring和mybatis整合在一起的xml文件中，我的是spring-mybatis.xml：
在这里插入图片描述

    <!-- spring和MyBatis完美整合，不需要mybatis的配置映射文件 -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource" />
        <!-- 自动扫描mapping.xml文件 -->
        <property name="mapperLocations" value="classpath:mapper/*.xml"></property>
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <!--使用下面的方式配置参数，一行配置一个 -->
                        <value>
                            params=value1
                        </value>
                    </property>
                </bean>
            </array>
        </property>
    </bean>

3、在mapper中写数据库的查询语句
在这里插入图片描述

  <select id="findAll"  resultType="cn.lnsf.bean.User">
    select id,username,sex,jurisdiction from user
  </select>

mapper接口里面的findAll方法：

    List<User> findAll();

这里的findAll是对应mapper里面的sql语句findAll的

PS:注意，不能在结尾添加分号";"，因为pagehelper会在这条查询语句后面添加limit，如果加了";"就会报错。
4、调用分页方法
我是在service层写方法，如果想直接在controller层写也可以
在这里插入图片描述

    @Override
    public PageInfo<User> getAllUserByPage(Integer page, Integer rows){
        //分页
        PageHelper.startPage(page,rows);
        List<User> list=userMapper.findAll();//调用查询语句
        PageInfo<User> pageInfo=new PageInfo(list);
        return  pageInfo;
    }

PS: PageHelper.startPage(page,rows);会为它下面的第一条查询语句进行分页，所以最好把查询语句紧靠着 PageHelper.startPage(page,rows);避免出现混淆。

controller层中调用：

@RequestMapping(value = "/showUserByPage")
@ResponseBody
public Map<String,Object> showUserByPage(Integer pageSize,Integer pageNumber,String searchText,HttpSession session,HttpServletRequest request,HttpServletResponse response) throws Exception{
    if (searchText!=null){
        try {
            searchText=new String(searchText.getBytes("ISO-8859-1"),"UTF-8");
        }catch (Exception e){
            e.printStackTrace();
        }
    }
    //searchText我没有用到，不用管它也ok的
    //组装返回的数据
    Map<String,Object> map=new HashMap<>();
         PageInfo<User> pageInfo=userService.getAllUserByPage(pageNumber,pageSize);
         //填充总记录数
         map.put("total",pageInfo.getTotal());
         //填充当前页的记录
         map.put("rows",pageInfo.getList());
    return map;

}

到这里就完成后台了，接下来写前端，前端使用了boostrap-table和boostrap。
功能有分页显示、保存勾选信息、添加修改和删除按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页显示</title>
</head>
<!--boostrap样式-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!--boostrap-table-->
<link href="bootstrap-table-master/dist/bootstrap-table.css" rel="stylesheet">
<link href="bootstrap-table-master/dist/bootstrap-table.min.css" rel="stylesheet">
<link href="bootstrap-table-master/src/extensions/fixed-columns/bootstrap-table-fixed-columns.css" rel="stylesheet">
<!--end boostrap-table css-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!--保存分页信息js-->
<script src="bootstrap-table-master/dist/bootstrap-table.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/lodash.min.js"></script>
<body>
<table id="test-table" class="col-xs-12" data-toolbar="#toolbar" data-mobile-responsive="true">
</table>


<script>
    var selectionIds =[];//保存已选的数据的id
    var $table;

    $(function () {

        $table=$("#test-table").bootstrapTable({
            method: 'get',
            toolbar: '#toolbar',    //工具按钮用哪个容器
            striped: true,      //是否显示行间隔色
            cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,     //是否显示分页（*）
            sortable: false,      //是否启用排序
            sortOrder: "asc",     //排序方式
            pageNumber:1,      //初始化加载第一页，默认第一页
            pageSize: 10,      //每页的记录行数（*）
            pageList: [10, 25, 50, 100],  //可供选择的每页的行数（*）
            paginationHAlign:'right',      //分页栏放在右边

            url: "/showUserByPage",//这个接口需要处理bootstrap table传递的固定参数
            queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
                                // 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber

            idField:"id",//这个要加上，通过这个来保存勾选的信息
            //queryParams: queryParams,//前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数
            sidePagination: "server",   //分页方式：client客户端分页，server服务端分页（*）
            //search: true,      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            maintainSelected:true,//设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
            //showColumns: true,     //是否显示所有的列
            //showRefresh: true,     //是否显示刷新按钮
            minimumCountColumns: 1,    //最少允许的列数
            clickToSelect: true,    //是否启用点击选中行
            searchOnEnterKey: true,
            responseHandler:responseHandler, //在渲染页面数据之前执行的方法，此配置很重要!!!!!!!
            columns: [
                {   field : 'checked',
                    checkbox: true,
                    align: 'center',
                    valign: 'middle',
                    formatter:function(value,row,index){//设置满足条件的行可以使用复选框
                        if(row.IS_PASS!=null){
                            return {
                                disabled : true
                            }
                        }
                    }
                },{
                    field: 'id',
                    title: 'id',
                    align: 'center'
                }, {
                    field: 'username',
                    title: '用户名',
                    align: 'center'
                }, {
                    field: 'sex',
                    title: '性别',
                    align: 'center'
                }, {
                    field: 'jurisdiction',
                    title: '权限',
                    align: 'center'
                },{
                    field: 'Button',
                    title: '操作',
                    events:operateEvents,//给按钮注册事件
                    formatter:AddFunctionAlty,//表格中增加按钮
                }],
            pagination:true
        });
    })


    //添加修改和删除button
    function AddFunctionAlty(value,row,index) {//把需要创建的按钮封装在函数中
        return [
            '<button id="upUser" type="button"  class="btn btn-default">修改</button>',
            '<button id="delUser" type="button" class="btn btn-default">删除</button>',
        ].join('');
    }
    window.operateEvents = {
        'click #upUser': function (e, value, row, index) {
            showEdit(row);//方法就不加上去了，有需要的话可以找留言找我要
        }, 'click #delUser': function (e, value, row, index) {
            delUser(row);//方法就不加上去了，有需要的话可以找留言找我要
        }
    };
    //添加方法 end

    //保存勾选信息 start
    $(function() {
        $table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table',
            function (e, rowsAfter, rowsBefore) {
                var rows = rowsAfter

                if (e.type === 'uncheck-all') {
                    rows = rowsBefore
                }

                var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
                    return row.id
                })

                var func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference'
                selectionIds = window._[func](selectionIds, ids)
            })
    })

    //表格分页之前处理多选框数据
    function responseHandler(res) {
        $.each(res.rows, function (i, row) {
            row.checked = $.inArray(row.id, selectionIds) != -1;	//判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true
        });
        return res;
    }
    //保存勾选信息 end
</script>
<!--下面这个要在boostrap里面找-->
<script src="assets/js/bootstrap.min.js"></script>
<!--下面的5个js文件都是在boostrap-table里面的-->
<script src="bootstrap-table-master/dist/bootstrap-table.min.js" type="text/javascript"></script>
<script type="text/javascript" src="bootstrap-table-master/dist/bootstrap-table.js"></script>
<script type="text/javascript" src="bootstrap-table-master/dist/bootstrap-table-locale-all.js"></script>
<script type="text/javascript" src="bootstrap-table-master/src/extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script>
<!--zh-CN要放到boostrap下面-->
<script src="bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.js" type="text/javascript"></script>
</body>

</html>

页面如下：
在这里插入图片描述
具体跑起来的样子可以去哔哩哔哩看：https://www.bilibili.com/video/av89830393