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("加載數據失敗");
                }
            })
}
    

三、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;


}