bootstrap-table下載地址：https://github.com/wenzhixin/bootstrap-table/
10年積累的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有鳳山免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
先來(lái)看一張效果圖：
下載下來(lái)后，需要導(dǎo)入的css：由于需要bootstrap的支持，所以需要導(dǎo)入bootstrap的css
需要導(dǎo)入的js：除了bootstrap的js跟table的js外第一個(gè)要導(dǎo)入的就是jQuery的js，他們都是基于jQuery開發(fā)的
bootstrap-table-zh-CN.js這個(gè)js是用來(lái)漢化table的提示文字的，在下載下來(lái)的bootstrap-table文件夾下的locale文件夾中有很多的語(yǔ)言包支持
完啦，我們只需要在html頁(yè)面中聲明一個(gè)table跟菜單div(如果不需要，可以不聲明)就好：
table_sysUser就是我們要顯示的table列表啦。
我們來(lái)看看js怎么來(lái)請(qǐng)求后臺(tái)的數(shù)據(jù)，并進(jìn)行分頁(yè)跟查詢：
重慶分公司
重慶分公司
//項(xiàng)目根目錄
var path = $("#contextPath").val();
$(document).ready(function() {
//初始化Table
var oTable = new TableInit();
oTable.Init();
//初始化頁(yè)面上面的按鈕事件
$("#btn_add").click(function(){
//新增
});
$("#btn_edit").click(function(){
//編輯
});
$("#btn_info").click(function(){
//詳情
});
$("#btn_delete").click(function(){
//刪除
});
});
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#table_sysUser').bootstrapTable({
url: path+'/sysuser/findUser.action', //請(qǐng)求后臺(tái)的URL（*）
method: 'post', //請(qǐng)求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個(gè)容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
pagination: true, //是否顯示分頁(yè)（*）
sortable: true, //是否啟用排序
sortName:"id",
sortOrder: "desc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）
queryParamsType: 'limit',
sidePagination: "server", //分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*）
pageNumber:1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
pageSize: 15, //每頁(yè)的記錄行數(shù)（*）
pageList: [10, 15, 20, 50], //可供選擇的每頁(yè)的行數(shù)（*）
search: true, //是否顯示表格搜索
strictSearch: true,
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數(shù)
clickToSelect: true, //是否啟用點(diǎn)擊選中行
//height: 500, //行高，如果沒(méi)有設(shè)置height屬性，表格自動(dòng)根據(jù)記錄條數(shù)覺(jué)得表格高度
uniqueId: "id", //每一行的唯一標(biāo)識(shí)，一般為主鍵列
showToggle:true, //是否顯示詳細(xì)視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細(xì)視圖
detailView: false, //是否顯示父子表
contentType: "application/x-www-form-urlencoded", //解決POST提交問(wèn)題
columns: [
{checkbox: true },
{title:'用戶名稱',field: 'userName',sortable:true },
{title:'手機(jī)號(hào)碼',field: 'phone',sortable:true,
formatter:function(v,r,i){
if(v){
return v.substring(0,3)+"****"+v.substring(7,4);
}
return v;
}
},
{title:'郵箱賬號(hào)',field: 'email',sortable:true },
{title:'生日',field: 'birthday',sortable:true },
{title:'部門',field: 'departmentKey',sortable:true,
formatter:function(v,r,i){
if(r.departmentValue){
return r.departmentValue;
}
return "";
}
},
{title:'最后登錄時(shí)間',field: 'lastLogintime',sortable:true },
{title:'性別',field: 'sex',sortable:true,
formatter:function(v,r,i){
switch (Number(v)) {
case 1:
return "男";
break;
case 2:
return "女";
break;
default:
return "未知";
break;
}
}
},
{title:'用戶狀態(tài)',field: 'status',sortable:true,
formatter:function(v,r,i){
return r.statusCn == "false"?"啟用":"禁用";
}
},
{title:'所屬公司編號(hào)',field: 'companyId',sortable:true },
{title:'注冊(cè)時(shí)間',field: 'createTime',sortable:true },
{title:'用戶頭像',field: 'userhead',sortable:true },
{title:'職位',field: 'positionKey',sortable:true},
{title:'角色',field:'role'}]
});
};
//得到查詢的參數(shù)
oTableInit.queryParams = function (params) {
var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動(dòng)，控制器也需要改成一樣的
pageSize: params.limit, //頁(yè)面大小
pageNumber: params.pageNumber, //頁(yè)碼
sortName: params.sort, //排序列名
sortOrder:params.order, //排序方式
searchText:params.search //搜索框參數(shù)
};
return temp;
};
return oTableInit;
}; 很多參數(shù)在代碼注釋里面說(shuō)得很明顯啦，我們來(lái)說(shuō)說(shuō)怎么新增查詢參數(shù)，我們只需要在queryParams方法里面在新增參數(shù)信息就行：
oTableInit.queryParams = function (params) {
var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動(dòng)，控制器也需要改成一樣的
pageSize: params.limit, //頁(yè)面大小
pageNumber: params.pageNumber, //頁(yè)碼
sortName: params.sort, //排序列名
sortOrder:params.order, //排序方式
searchText:params.search, //搜索框參數(shù)
searchText:params.search, //搜索框參數(shù)
};
return temp;
}; bootstrap-table獲取頁(yè)面上勾選的數(shù)據(jù)：
var rowData = $("#table_sysUser").bootstrapTable("getSelections");bootstrap-table刷新表格：
$('#table_sysUser').bootstrapTable('refresh'); 源碼：https://git.oschina.net/gzsjd/task
