bootstrap table 分頁+自定義按鈕列

$('#exampleTableFromData').bootstrapTable({
		    	 method: 'post', // 向服務器請求方式
		    	 contentType: "application/x-www-form-urlencoded", // 如果是post必須定義
		    	//height: "250" //表格高度
			  //data: bt_data,//數據源
		    	  url:url2,//加載URL
		    	  /*striped: true,     //使表格帶有條紋  
*/			   search: false,//啓用搜索
			   pageNumber: 1,//初始化table時顯示的頁碼
			    pageSize: 4,//每頁條目
			     /* pageList: [10 , 20, 50, 100],*/
			      showRefresh: true,//顯示刷新按鈕
			      sidePagination: "server",//表格分頁的位置  
			      // mobileResponsive: true,
			      sortable:"true",
			      sortOrder: "asc",
			      dataField: "data",//後臺數據
			      queryParams: function (params) {
			    	  console.log(params);
			    	  console.log(params.limit);
			    	  console.log(params.offset);
			          return {  
			        	  pageSize: params.limit,  
			        	  pageIndex:params.pageNumber  //上一篇教你怎麼改掉js,不然會出現未定義
			          }  
			      },
			      queryParamsType:'limit', // 請求參數,這個關係到後續用到的異步刷新 
			        
	              /*minimumCountColumns: 2,             //最少允許的列數
	              clickToSelect: true,*/                //是否啓用點擊選中行
			      pagination: true,
			     /* showToggle: true,  */                  //是否顯示詳細視圖和列表視圖的切換按鈕
			     /* cardView: false, */                   //是否顯示詳細視圖
			      
			      searchAlign: "left",//查詢框對齊方式
			      searchOnEnterKey: true,//回車搜索
			      buttonsAlign: "left",//按鈕對齊方式
	              toolbar: "#toolbar",//指定工具欄
	              toolbarAlign: "right",//工具欄對齊方式,
	              onClickRow:function(row, tr){
	            	  console.log(row);
	            		detailPage('編輯信息','xxxx',row)
	              },
			      columns:[
			               {
					    field: 'number',
					    title: '序號',
					    width: '5%',
					    align:'center',
					    switchable:false,
					    formatter:function(value,row,index){
					        //return index+1; //序號正序排序從1開始
					        var pageSize=$('#exampleTableFromData').bootstrapTable('getOptions').pageSize;//通過表的#id 可以得到每頁多少條
					        var pageNumber=$('#exampleTableFromData').bootstrapTable('getOptions').pageNumber;//通過表的#id 可以得到當前第幾頁
					        return pageSize * (pageNumber - 1) + index + 1;    //返回每條的序號: 每頁條數 * (當前頁 - 1 )+ 序號
					    	}
						},
						{
						    title: 'id',
						    field: 'id',
						    align: 'center',
						    valign: 'middle',
						    width: '7%',
						    visible: false
						}, 
						{
						    title: '標題',
						    field: 'memo_title',
						    align: 'center',
						    valign: 'middle',
							width: '20%'
						},
						{
						    title: '類型',
						    field: 'memo_type',
						    align: 'center',
						    valign: 'middle',
						    width: '7%'
						},
						{
						    title: '內容',
						    field: 'memo_content',
						    align: 'center',
						    valign: 'middle'
						}, 
						{
						    title: '時間',
						    field: 'memo_date',
						    align: 'center',
						    valign: 'middle',
						    width: '9%'
						}
						, 
						{
						    title: '創建人',
						    field: 'memo_username',
						    align: 'center',
						    valign: 'middle',
						    width: '7%'
						}/*, 
						{
						    title: '緊急程度',
						    field: 'column3',
						    align: 'center',
						    valign: 'middle',
						    width: '7%',
						}*//*,
						{
						    title: '開始日期',
						    field: 'start_time',
						    align: 'center',
						    valign: 'middle',
						    width: '10%'
						},
						{
						    title: '結束日期',
						    field: 'end_time',
						    align: 'center',
						    valign: 'middle',
						    	width: '10%'
						}*//*, 
						{
						    title: '操作',
						    field: 'operate',
						    align: 'center',
						    valign: 'middle',
						    width: '12%',
						    formatter: operateFormatter //自定義方法,添加操作按鈕
						}*/
						
			      ]
		      
		    });
          function operateFormatter (value, row, index) {
			    var id = value;
			    var result = "";
			    result += "<a οnclick=\"EditViewById('" + id + "', view='view')\" title='查看'>詳情</a>";
			    result += "<a> 編輯 </a>";
			    result += "<a οnclick=\"DeleteByIds('" + id + "')\" title='刪除'> 刪除 </a>";
			
			    return result;
    
          
          } ;
          
          

刷新:$('#exampleTableFromData').bootstrapTable('refresh');//刷新數據

 queryParamsType:'', //默認值爲 'limit' ,在默認情況下 傳給服務端的參數爲:offset,limit,sort
                                    // 設置爲 ''  在這種情況下傳給服務器的參數爲:pageSize,pageNumber

                //queryParams: queryParams,//前端調用服務時,會默認傳遞上邊提到的參數,如果需要添加自定義參數,可以自定義一個函數返回請求參數

/ 分頁查詢參數,是以鍵值對的形式設置的
function queryParams(params) {
	return {
		eventName: $('#eventqueryform input[name=\'eventName\']').val(), // 請求時向服務端傳遞的參數
		status: $('#eventqueryform input[name=\'status\']').val(), // 請求時向服務端傳遞的參數
		location: $('#eventqueryform input[name=\'location\']').val(), // 請求時向服務端傳遞的參數
		startdate: $('#eventqueryform input[name=\'startdate\']').val(), // 請求時向服務端傳遞的參數
		enddate: $('#eventqueryform input[name=\'enddate\']').val(), // 請求時向服務端傳遞的參數

		limit: params.limit, // 每頁顯示數量
		offset: params.offset, // SQL語句偏移量
	}
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章