1. 程式人生 > >BootStrap 表格分頁(伺服器客戶端)

BootStrap 表格分頁(伺服器客戶端)

伺服器分頁表格 

 function InitMainTable1 () {
	            //記錄頁面bootstrap-table全域性變數$table,方便應用
	            var queryUrl = "/XServer/user.do?_method=doSearch";
	            $table = $('#table').bootstrapTable({
	                url: queryUrl,                      //請求後臺的URL(*)
	                method: 'POST',                      //請求方式(*)
	                striped: true,                      //是否顯示行間隔色
	                cache: false,                       //是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*)
	                pagination: true,                   //是否顯示分頁(*)
	                sortable: true,                     //是否啟用排序
	                sortOrder: "asc",                   //排序方式
	                sidePagination: "server",           //分頁方式:client客戶端分頁,server服務端分頁(*)
	                pageNumber: 1,                      //初始化載入第一頁,預設第一頁,並記錄
	                pageSize: 8,                     //每頁的記錄行數(*)
	                pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數(*)
	                search: false,                      //是否顯示錶格搜尋
	                strictSearch: true,
	                showColumns: false,                  //是否顯示所有的列(選擇顯示的列)
	                showRefresh: true,                  //是否顯示重新整理按鈕
	                minimumCountColumns: 2,             //最少允許的列數
	                clickToSelect: true,                //是否啟用點選選中行
	                //height: 500,                      //行高,如果沒有設定height屬性,表格自動根據記錄條數覺得表格高度
	                uniqueId: "ID",                     //每一行的唯一標識,一般為主鍵列
	                showToggle: true,                   //是否顯示詳細檢視和列表檢視的切換按鈕
	                cardView: false,                    //是否顯示詳細檢視
	                detailView: false,                  //是否顯示父子表
	                //得到查詢的引數
	                queryParams : function (params) {
	                    //這裡的鍵的名字和控制器的變數名必須一直,這邊改動,控制器也需要改成一樣的
	                    var temp = {   
	                        rows: params.limit,                         //頁面大小
	                        page: (params.offset / params.limit) + 1,   //頁碼
	                        sort: params.sort,      //排序列名  
	                        sortOrder: params.order //排位命令(desc,asc) 
	                    };
	                    return temp;
	                },
	                columns: [{
	                    checkbox: true,  
	                    visible: true                  //是否顯示覆選框  
	                }, {
	                    field: 'id',
	                    title: 'ID',
	                    sortable: true
	                },{
	                    field: 'name',
	                    title: '姓名',
	                    sortable: true
	                }, {
	                    field: 'departmentStr',
	                    title: '部門',
	                    sortable: true
	                }, {
	                    field: 'office',
	                    title: '職位',
	                    sortable: true,
	                },],
	                onLoadSuccess: function () {
	                },
	                onLoadError: function () {
	                    showTips("資料載入失敗!");
	                },
	                onDblClickRow: function (row, $element) {
	                    var id = row.ID;
	                    EditViewById(id, 'view');
	                },
	            });
	        };
function queryParams(params) 
			{
				var paras = {};
	        	var queryPara = JSON.stringify(paras);
	    		params._json = queryPara;
	        	
		        return params;
		    }

表格重新載入

$("#tb2").bootstrapTable('destroy');

客戶端表格分頁:

 function getTb2(jsonUser){
	        	$("#tb2").bootstrapTable('destroy');
	        	$('#tb2').bootstrapTable({
	        		 striped: true,                      //是否顯示行間隔色
		                cache: false,                       //是否使用快取,預設為true,所以一般情況下需要設定一下這個屬性(*)
		                pagination: true,                   //是否顯示分頁(*)
		                sortable: true,                     //是否啟用排序
		                sortOrder: "asc",                   //排序方式
		                sidePagination: "client",           //分頁方式:client客戶端分頁,server服務端分頁(*)
		                pageNumber: 1,                      //初始化載入第一頁,預設第一頁,並記錄
		                pageSize: 8,                     //每頁的記錄行數(*)
		                pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數(*)
		                search: false,                      //是否顯示錶格搜尋
		                strictSearch: true,
		                showColumns: false,                  //是否顯示所有的列(選擇顯示的列)
		                showRefresh: true,                  //是否顯示重新整理按鈕
		                minimumCountColumns: 2,             //最少允許的列數
		                clickToSelect: true,                //是否啟用點選選中行
		                //height: 500,                      //行高,如果沒有設定height屬性,表格自動根據記錄條數覺得表格高度
		                uniqueId: "ID",                     //每一行的唯一標識,一般為主鍵列
		                showToggle: true,                   //是否顯示詳細檢視和列表檢視的切換按鈕
		                cardView: false,                    //是否顯示詳細檢視
		                detailView: false,                  //是否顯示父子表
	    			columns: 
	    			[
	    				{field:"checked",checkbox:true},
	    				{field:"departmentStr",title:"部門",align:"center",valign:"middle",sortable:"true"},
	    				{field:"officeStr",title:"職位",align:"center",valign:"middle",sortable:"true"},
	    				{field:"name",title:"姓名",align:"center",valign:"middle",sortable:"true"},
	    			],
	    			data:jsonUser,
	    		});			
	        }

jsonUser  是在客戶端的j'son   我的表格就是為了顯示json的內容    columns中的第一個引數和json的引數一樣才能顯示