$(document).ready(function(){
	
	var queryParams = function (params) {
        var temp = {   //這裏的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
            limit: params.limit,   //頁面大小
            offset: params.offset,  //頁碼
            name: $("#queryTxt").val()
        };
        return temp;
    };
	
	$(‘#tb_userList‘).bootstrapTable({
        url: ‘getDiscUserList‘,
        method: ‘post‘,                     
        contentType : "application/x-www-form-urlencoded",
        toolbar: ‘#toolbar‘,                //工具按鈕用哪個容器
        striped: true,                      //是否顯示行間隔色
        cache: false,                       //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
        pagination: true,                   //是否顯示分頁（*）
        sortable: true,                     //是否啟用排序
        sortOrder: "asc",                   //排序方式
        sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
        idField : ‘id‘,
        pageNumber:1,                       //初始化加載第一頁，默認第一頁
        pageSize: 10,                       //每頁的記錄行數（*）
        pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
        minimumCountColumns: 3,             //最少允許的列數
        queryParams: queryParams,//傳遞參數（*）
        clickToSelect: true,                //是否啟用點擊選中行
        uniqueId: "id",                     //每一行的唯一標識，一般為主鍵列
        cardView: false,                    //是否顯示詳細視圖
        detailView: false,                   //是否顯示父子表
        singleSelect:true,
        columns: [{
            checkbox: true
        }, {
            field: ‘userOid‘,
            title: ‘編號‘
        }, {
            field: ‘realName‘,
            title: ‘真實名稱‘
        }, {
            field: ‘company‘,
            title: ‘公司‘
        } ,{
            field: ‘industry‘,
            title: ‘行業‘
        },{
            field: ‘occupation‘,
            title: ‘職業‘
        },{
            field: ‘email‘,
            title: ‘郵箱‘
        },{
            field: ‘phone‘,
            title: ‘電話‘
        },{
            field: ‘remark‘,
            title: ‘備註‘
        },{
        	field: ‘operator‘,
        	title: ‘操作‘,
        	formatter : function(value,row,index){ 
        		//TODO
                var d = ‘<a  class="delete_user" >刪除</a> ‘; 
                d = d + ‘<a  class="active_user" >激活</a> ‘;
                d = d + ‘<a  class="freeze_user" >凍結</a> ‘;
                return d;    
            },events:{
            	‘click .delete_user‘:function (e,value,row,index){
            			$.util.ajax({
            				url : ‘delDiscUser?userOid=‘+row.userOid,
            				type : ‘POST‘,
            				dataType : ‘html‘, 
            				success : function (data) {
            					console.log(data);
            					if(data=="success"){
            						layer.msg(‘刪除成功‘);
            						$("#tb_userList").bootstrapTable(‘refresh‘,{url:‘getDiscUserList‘});
            					}else {
            						layer.open({
            							content:‘刪除失敗‘
            						});
            					}
            				}  
            			});
            		},
           		‘click .active_user‘:function (e,value,row,index){
           			$.util.ajax({
           				url : ‘‘,
           				type : ‘POST‘,
           				dataType : ‘html‘, 
           				success : function (data) {
           					console.log(data);
           					if(data=="success"){
           						layer.msg(‘激活成功‘);
           						$("#tb_userList").bootstrapTable(‘refresh‘,{url:‘‘});
           					}else {
           						layer.open({
           							content:‘激活失敗‘
           						});
           					}
           				}  
           			});
           		}
            	}
            }
          ],
        //pagination:true
    });
});

$("#btn_query").click(function(){
	$("#tb_userList").bootstrapTable(‘refresh‘,{url:‘getDiscUserList‘});
});

　　bootstrap table 的使用

bootstrap table