Bootstrap笔记-----bootstrap分页05

参考文章

https://blog.csdn.net/qq_36073929/article/details/53032198

1前台页面

<table id="table1" data-classes="table table-hover "
       data-search="true"
       data-show-refresh="true"
       data-show-columns="true"></table>

2后台初始化列表

function initTable() {

    $('#table1')
        .bootstrapTable(
            {
                method : 'post',// 请求方式（*）
                url : 'list',// 请求后台的URL（*）
                cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                sortable : false, // 是否启用排序
                contentType: 'application/x-www-form-urlencoded',
                pagination : true,// 是否显示分页（*）
                queryParamsType: "limit",//查询参数组织方式
                pageSize : 10, // 每页的记录行数（*）
                pageList : [ 5, 10, 15 ], // 可供选择的每页的行数（*）
                search:true,//搜索框
                pageNumber:1,
                striped : true, // 表格显示条纹
                silent: true,
                strictSearch:true,//
                showColumns:true,// 是否显示所有的列
                showRefresh:true,//刷新
                showToggle : true, // 是否显示详细视图和列表视图的切换按钮
                cardView : false, // 是否显示详细视图
                detailView : false, // 是否显示父子表
                toolbar : '#toolbar',
                clickToSelect : true,
                sidePagination : 'server',
                queryParams : function(params){
                    console.info(params.offset);
                  return params;
                },
                columns : [
                    {field : 'stat',
                        width : 2,
                        checkbox : true
                    },
                    {
                        field : 'id',
                        title : 'id',
                        align : 'left',
                        valign : 'middle',
                        width : 200,
                        sortable : true,
                        visible:false
                    }
                    ,
                    {
                        field : 'username',
                        title : '姓名',
                        align : 'left',
                        valign : 'middle',
                        width : 200,
                        sortable : true
                    }
                    , {
                        field : 'password',
                        title : '密码',
                        align : 'left',
                        valign : 'middle',
                        width : 50,
                        sortable : true
                    }],
                onClickRow : function(row, $element){
                    //console.info(row);
                },
                onDblClickRow : function(row, $element){//双击
                    //console.info(row);
                },
                onLoadSuccess: function(data){  //加载成功时执行
                    console.info(JSON.stringify(data));
                    console.info("加载成功");
                },
                onLoadError: function(){  //加载失败时执行
                    console.info("加载数据失败");
                }
            })
}
    

3、bootstrap会向后台传递limit、offset、用来分页  传递向后台

queryParams : function (params) {
                    //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    var temp = {   
                        rows: params.limit,                         //页面大小
                        page: (params.offset / params.limit) + 1,   //页码
                        sort: params.sort,      //排序列名  
                        sortOrder: params.order //排位命令（desc，asc） 
                    };
                    return temp;
                },

4后台写实体类接收参数

package com.demo.pojo;

public class PageHelper {
    private int offset;// 当前记录
    private int limit;// 显示几条
    private String sort;// 排序字段
    private String order;// asc/desc


    public String getSort() {
        return sort;
    }

    public void setSort(String sort) {
        this.sort = sort;
    }

    public String getOrder() {
        return order;
    }

    public void setOrder(String order) {
        this.order = order;
    }

    public int getOffset() {
        return offset;
    }

    public void setOffset(int offset) {
        this.offset = offset;
    }

    public int getLimit() {
        return limit;
    }

    public void setLimit(int limit) {
        this.limit = limit;
}

}

package com.demo.pojo;

import java.util.List;

@SuppressWarnings("rawtypes")
public class BsTable {
    private Long total;
    private List rows;

    public Long getTotal() {
        return total;
    }

    public void setTotal(Long total) {
        this.total = total;
    }

    public List getRows() {
        return rows;
    }

    public void setRows(List rows) {
        this.rows = rows;
    }

}

controller

@RequestMapping(value = "/list")
@ResponseBody
public Object list(PageHelper ph)

{

    return userService.list(ph);
}

dao层进行分页查询 返回自定义的table类型

public BsTable list(PageHelper ph) {
    BsTable table = new BsTable();
    String hql = new String("from User where deleted=0 ");
    List list=userDao.find(hql.toString(), ph.getOffset(), ph.getLimit());

    table.setTotal(userDao.count("select count(*)"+hql));
    table.setRows(list);
    return table;


}