ssm分頁+bootstrap-table

1.前端代碼

html:引入bootstrap-table相關的js和css
jquery-1.9.1.min.js
bootstrap.min.css
bootstrap.min.js
bootstrap-table.js
bootstrap-table.min.css
bootstrap-table-zh-CN.js
<table id="infoDetail"></table>

js:
function showDetail(){
        $('#infoDetail').bootstrapTable({
             url: "xxxx",//數據源
             pagination: true,//是否分頁
             contentType: "application/x-www-form-urlencoded",//請求數據內容格式 默認是 application/json 自己根據格式自行服務端處理
             dataType: "json",//期待返回數據類型
             method: "post",//請求方式
             striped:true,
             queryParamsType:'',
             sidePagination: "server", //分頁方式:client客戶端分頁,server服務端分頁(*)
             pageNumber:1,                       //初始化加載第一頁,默認第一頁
             pageSize: 10,                       //每頁的記錄行數(*)
             pageList: [10, 20, 30],        //可供選擇的每頁的行數(*)
             queryParams: function getParams(params) {
                params.valueA = aa;
                params.valueB= bb;
                params.valueC= 5
             return params;
             },
            clickToSelect:true,
             buttonsAlign: "left",//按鈕對齊方式
             columns: [
             {
                 title: "姓名",
                 field: "name",
                 visible:true
             },
             {
                 title: "年齡",
                 field: "age"
             },         
              ],
             locale: "zh-CN"//中文支持
        });
    }
    //queryParams是傳入到後臺的參數

2.controller

    @ResponseBody
    @RequestMapping(value = { "xxxx", "" })
    public String getStudent(String valueA,int valueC,String valueB,
            Integer pageSize, Integer pageNumber,String sortName,String sortOrder){
            //pageSize,pageNumber,sortName,sortOrder是默認傳過來的分頁參數
            Map<String,Object> paramMap=new HashMap<>();
            paramMap.put("pageSize", pageSize);
        paramMap.put("startPlace", (pageNumber-1)*pageSize);
        paramMap.put("sortName", sortName);
        paramMap.put("sortOrder", sortOrder);
        //........獲取總數
        //.....獲取分頁信息
        //最後要返回一個總數和一個信息列表
        Map<String,Object> mapResult=new HashMap<>();
        mapResult.put("total", total);
        mapResult.put("rows", sudentList);

        String jsonResult=JsonUtil.toJson(mapResult);
        return jsonResult;
            }

3.xml

select a.name as name,a.age as age from student 
where 1=1
    <if test="startPlace != null and pageSize != null">
                limit #{startPlace},#{pageSize}
    </if>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章