bootstrap-table分頁

服務器端分頁

注意服務器端數據的返回的格式

[json]必須包含:total節點(總記錄數),rows節點(分頁後數據)
即:{“total”:24,”rows”:[…]}

 $('#test-table').bootstrapTable({
                 //請求方法
                method: 'get',
                 //是否顯示行間隔色
                striped: true,
                //是否使用緩存,默認爲true,所以一般情況下需要設置一下這個屬性(*)     
                cache: false,   
                //是否顯示分頁(*) 
                pagination: true,   
                 //是否啓用排序 
                sortable: false,   
                 //排序方式 
                sortOrder: "asc",   
                //初始化加載第一頁,默認第一頁
                //我設置了這一項,但是貌似沒起作用,而且我這默認是0,- -
                //pageNumber:1,   
                //每頁的記錄行數(*)   
                pageSize: 10, 
                //可供選擇的每頁的行數(*)   
                pageList: [10, 25, 50, 100],
                //這個接口需要處理bootstrap table傳遞的固定參數,並返回特定格式的json數據 
                url: "/test/testtable.action",
                //默認值爲 'limit',傳給服務端的參數爲:limit, offset, search, sort, order Else
                //queryParamsType:'',   
                ////查詢參數,每次調用是會帶上這個參數,可自定義                         
                queryParams: queryParams : function(params) {
                    var subcompany = $('#subcompany option:selected').val();
                    var name = $('#name').val();
                    return {
                          pageNumber: params.offset+1,
                          pageSize: params.limit,
                          companyId:subcompany,
                          name:name
                        };
                },
                //分頁方式:client客戶端分頁,server服務端分頁(*)
                sidePagination: "server",
                //是否顯示搜索
                search: false, 
                //Enable the strict search.   
                strictSearch: true,
                //Indicate which field is an identity field.
                idField : "id",
                columns: [{
                    field: 'id',
                    title: 'id',
                    align: 'center'
                }, {
                    field: 'testkey',
                    title: '測試標識',
                    align: 'center'
                }, {
                    field: 'testname',
                    title: '測試名字',
                    align: 'center'
                },{
                    field: 'id',
                    title: '操作',
                    align: 'center',
                    formatter:function(value,row,index){
                        //通過formatter可以自定義列顯示的內容
                        //value:當前field的值,即id
                        //row:當前行的數據
                        var a = '<a href="" >測試</a>';
                    } 
                }],
                pagination:true
            });

客戶端分頁

將sidePagination屬性設爲 “client”即可

服務器返回json數據必須包含data節點(展示數據)


當數據量較少,只有上千條數據時,一次性將所有數據返回給客戶端,無論點下一頁,或搜索條件時,不向服務端發請求,實現全文檢索
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章