Bootstrap table server-side pagination example

<tableid="test-table"class="col-xs-12"data-toolbar="#toolbar">

function initTable(){
            $('#test-table').bootstrapTable({
                method: 'get',
                toolbar: '#toolbar', //Which container is used for the tool button
                striped: true, //Whether to display the row interval color
                cache : false, //Whether to use cache, the default is true, so in general, you need to set this property (*)
                pagination: true, //whether to display paging (*)
                sortable: false, //whether to enable sorting
                sortOrder: "asc ", //sort method
                pageNumber:1, //initialize loading the first page, default first page
                pageSize: 10, //number of record rows per page (*)
                pageList: [10, 25, 50, 100], / /Number of lines per page to choose from (*)
                url: " ${ request .contextPath}/fdnRegTbl/listByPage ",//This interface needs to process the fixed parameters passed by the bootstrap table
               
queryParamsType:'', //The default value is 'limit', and the parameters passed to the server by default are: offset, limit, sort
                                    // Set to '' In this case, the parameters passed to the server are: pageSize, pageNumber


                queryParams: queryParams,//When the front-end calls the service, the parameters mentioned above will be passed by default. If you need to add custom parameters, you can customize one The function returns the request parameter
                sidePagination: "server", //Pagination method: client paging, server server paging (*)
                //search: true, //Whether to display table search, this search is client search, will not enter Server side, so personally, it doesn't make much sense.
                strictSearch: true,
                //showColumns: true, //whether to display all columns
                //showRefresh: true, //whether to display refresh button
                minimumCountColumns: 2, //minimum allowed number of columns
                clickToSelect: true,//Whether to enable click to select row
                searchOnEnterKey: true,
                columns: [{
                    field: 'id',
                    title: 'id',
                    align: 'center'
                }, {
                    field: 'testkey',
                    title: 'Test ID',
                    align: 'center'
                }, {
                    field : 'testname',
                    title: 'test name',
                    align: 'center'
                },{
                    field: 'id',
                    title: 'operation',
                    align: 'center',
                    formatter:function(value,row,index){
                        //The content displayed by the column can be customized through the formatter
                        //value: the value of the current field, that is, the id
                        //row: the data of the current row
                        var a = '<a href="" >test</a>';
                    } 
                } ],
                pagination:true
            });
        }


//parameters passed when requesting service data
 function queryParams (params){
     return {
         //how many pieces of data per page
 pageSize : params. pageSize ,
         // which page
 is requested pageNumber : params. pageNumber ,                
	//自定义的参数
        module:$('#module').val(),
        tblName:$('#tblName').val()
    }
}


@RequestMapping(value="/listByPage",method = {RequestMethod.GET,RequestMethod.POST})
   @ResponseBody
   public JSONObject listByPage(@RequestBody Map<String, String> param) throws Exception{
      JSONObject jsonObject = new JSONObject();
      Page page = new Page();
      page.setPageSize(Integer.valueOf(param.get("pageSize")));
      page.setCurrentPage(Integer.valueOf(param.get("pageNumber")));
      Page pageData = getService().selectPage(XXX, page);
      jsonObject.put("rows",pageData.getResult());
      jsonObject.put("total",pageData.getTotalCount());
      return jsonObject;
   }
 
 
几点注意
1、queryParamsType默认值为'limit',不设置就是默认值。所以必须设置,可以是queryParamsType:''
2、根据queryParamsType值的不同,设置分页参数属性。queryParamsType的类型必须和分页参数名称匹配,否则取不到值

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326136079&siteId=291194637
Recommended