1. 程式人生 > >Bootstrap table列表查詢、模糊查詢和refresh使用

Bootstrap table列表查詢、模糊查詢和refresh使用

        var url;
	//模糊查詢
	function searchUser(){
		var keyword = $("#keyword").val();
		var queryparam = {
			silent:true,
			query:{
				keyword:keyword
			}
		};
		$('#table_user').bootstrapTable('refresh',queryparam);
	}
		
	//返回
	function returnBack(){
		$('#table_user').bootstrapTable('refresh');//呼叫方法查取table列表
	}
		
	//封裝的table方法
	function boostrap_table(k){
		$('#table_user').bootstrapTable({
		    url: '', 
		    dataType: "json",
		    type:"post",
		    queryParams : function (params) {
	                var temp = {
	                   rows: params.limit,
	                   page: (params.offset / params.limit) + 1,
	                   keyword:k,
	                };
	                return temp;
	            },
		    striped: true,//設定為 true 會有隔行變色效果  
		    undefinedText: "空",//當資料為 undefined 時顯示的字元  
		    pagination: true, //分頁         
		    pageList: [10, 15, 20, 25, 30],
		    paginationPreText: '‹',//指定分頁條中上一頁按鈕的圖示或文字,這裡是<  
		    paginationNextText: '›',//指定分頁條中下一頁按鈕的圖示或文字,這裡是>  
		    singleSelect: false,//設定True 將禁止多選 
		    data_local: "zh-US",//表格漢化
			fitColumns: true,
			singleSelect: true,
		    sidePagination: "server", //服務端處理分頁 
		    columns: [
				{checkbox: true},
				{field:'id',title:'ID',align:'center',valign: 'middle'},
				{field:'username',title:'登入名',align:'center',valign: 'middle'},
				{field:'fullname',title:'姓名',align:'center',valign: 'middle'},
				{field:'sex',title:'性別',align:'center',valign: 'middle',
				    formatter:function(value, row, index){ 			   
					    //判斷性別
		    		    if(row.sex == 0){
		    			    return "女";
		    		    }else if(row.sex == 1){
		    			    return "男";
		    		    }
				    }
				},
				{field:'roleName',title:'使用者角色',align:'center',valign: 'middle'},
                                {field:'address',title:'使用者地址',align:'center',valign: 'middle'},
				{field:'email',title:'郵箱',align:'center',valign: 'middle'},
				{field:'phone',title:'電話',align:'center',valign: 'middle'},
				{field:'status',title:'狀態',align:'center',valign: 'middle',
					formatter:function(value, row, index){
						//判斷性別
		    			if(row.status == 0){
		    				return "禁用";
		    			}else if(row.status == 1){
		    				return "啟用";
		    			}
					}
				},
				{field:'description',title:'備註',align:'center',valign: 'middle'},
				{field:'value',title:'操作',align:'center',valign: 'middle',
				   formatter:function(value, row, index){
					  var e = '<a href="#" class="btn btn-info"  onclick="updateUser(\''+ row.id + '\')"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a> ';
	                            return e ;
					}
				}
			]
		});
	}