BootStrap數(shù)據(jù)表格實(shí)例代碼
首先初始化頁(yè)面
$(function(){
$('#archives-table').bootstrapTable({
url: "/coinSend/list",//數(shù)據(jù)源
dataField: "rows",//服務(wù)端返回?cái)?shù)據(jù)鍵值 就是說記錄放的鍵值是rows,分頁(yè)時(shí)使用總記錄數(shù)的鍵值為total
search: true,//是否搜索
cache: false,
striped: true,
pagination: true,//是否分頁(yè)
sortable: true, //是否啟用排序
sortOrder: "asc", //排序方式
//pageNumber:1,
pageSize: 10,//單頁(yè)記錄數(shù)
pageList: [5, 10, 20, 50],//分頁(yè)步進(jìn)值
sidePagination: "server",//服務(wù)端分頁(yè)
contentType: "application/json",//請(qǐng)求數(shù)據(jù)內(nèi)容格式 默認(rèn)是 application/json 自己根據(jù)格式自行服務(wù)端處理
dataType: "json",//期待返回?cái)?shù)據(jù)類型
method: "post",//請(qǐng)求方式
searchAlign: "left",//查詢框?qū)R方式
silent: true,
queryParamsType: "limit",//查詢參數(shù)組織方式
queryParams: function getParams(params) {
var param = {
pageNum: params.pageNumber,
pageSize: params.pageSize,
realName : params.search
};
return param;
},
responseHandler: function(res) {
return {
"total": res.total,//總頁(yè)數(shù)
"rows": res.rows //數(shù)據(jù)
};
},
searchOnEnterKey: false,//回車搜索
showRefresh: true,//刷新按鈕
showColumns: true,//列選擇按鈕
buttonsAlign: "left",//按鈕對(duì)齊方式
toolbar: "#userToolbarsendCoin",//指定工具欄
toolbarAlign: "right",//工具欄對(duì)齊方式
columns: [
/*{
title: "全選",
field: "select",
checkbox: true,
width: 20,//寬度
align: "center",//水平
valign: "middle"http://垂直
},*/
{
title: "ID",//標(biāo)題
field: "id",//鍵名
sortable: true,//是否可排序
order: "desc"http://默認(rèn)排序方式
},
{
field: "userInfo.userName",
title: "用戶名",
sortable: true,
titleTooltip: "this is name"
}/*,
{
field: "userInfo.id",
title: "userInfo.id",
}*/,
{
field: "userInfo.realName",
title: "真實(shí)姓名",
sortable: true,
},
{
field: "userInfo.department",
title: "所屬部門",
sortable: true,
},{
field: "coinName",
title: "類型",
sortable: true,
},
{
field: "amount",
title: "數(shù)量",
sortable: true,
sorter:numSort
},
{
field: "validDateStart",
title: "有效期起",
sortable: true,
//——修改——獲取日期列的值進(jìn)行轉(zhuǎn)換
formatter: function (value, row, index) {
var time = new Date(value);
var y = time.getFullYear();//年
var m = time.getMonth() + 1;//月
var d = time.getDate();//日
return y+"-"+m+"-"+d
}
},
{
field: "validDateEnd",
title: "有效期止",
sortable: true,
//——修改——獲取日期列的值進(jìn)行轉(zhuǎn)換
formatter: function (value, row, index) {
var time = new Date(value);
var y = time.getFullYear();//年
var m = time.getMonth() + 1;//月
var d = time.getDate();//日
return y+"-"+m+"-"+d}
}
,
{
field: "userInfo.id",
title: "操作列",
formatter:function(value, row, rowIndex){
var userId =row.userInfo.id;
var amount =row.amount;
var validDateStart =row.validDateStart;
var validDateEnd =row.validDateEnd;
var realName =row.userInfo.realName;
console.log(userId);
console.log(realName);
console.log(amount);console.log(validDateStart);console.log(validDateEnd);
if(userId!=null){
return' '+'<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\''+userId+'\',\''+realName+'\',\''+row.id+'\');"> <i class="icon-edit icon-white"></i>分配</a>' +' '/*+
'<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="editTw(\''+userId+'\',\''+amount+'\',\''+realName+'\',\''+validDateEnd+'\',\''+row.id+'\');"> <i class="icon-edit icon-white"></i>編輯</a>'*/;
}else{
return '<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\''+userId+'\');"> <i class="icon-edit icon-white"></i>分配</a>';
}
}
}
],
onClickRow: function(row, $element) {
//$element是當(dāng)前tr的jquery對(duì)象
$element.css("background-color", "white");
/*alert(row.id);
id = row.id;*/
},//單擊row事件
locale: "zh-CN",//中文支持,
detailView: false, //是否顯示詳情折疊
detailFormatter: function(index, row, element) {
var html = '';
$.each(row, function(key, val){
html += "<p>" + key + ":" + val + "</p>"
});
return html;
}
})
/*$('#archives-table').bootstrapTable('hideColumn', 'userInfo.id');*/
/*$("#searchBtn").click(function() {
var realName = $("#realName").val();
$.ajax({
type: "post",
url: "/coinSend/list",
data: {param : param},
dataType:"json",
success : function(json) {
$("#archives-table").bootstrapTable('load', json);//主要是要這種寫法
}
});
});*/
})
請(qǐng)求后臺(tái)controller,動(dòng)態(tài)獲取數(shù)據(jù)
表格可以加一個(gè)手風(fēng)琴樣式
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>員工列表</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="ibox float-e-margins">
<table id="archives-table" class="table table-hover">
</table>
</div>
</div>
</div>
總結(jié)
以上所述是小編給大家介紹的BootStrap數(shù)據(jù)表格實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
HTML+JS模擬實(shí)現(xiàn)QQ下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+JavaScript模擬實(shí)現(xiàn)QQ中的下拉菜單效果。文中的示例代碼講解詳細(xì),感興趣的小伙伴可以學(xué)習(xí)一下2022-05-05
uni-app多環(huán)境配置實(shí)現(xiàn)自動(dòng)部署的方式詳解
前后端分離開發(fā)模式中,無論前后端都有可能區(qū)分不同的環(huán)境配置,下面這篇文章主要給大家介紹了關(guān)于uni-app多環(huán)境配置實(shí)現(xiàn)自動(dòng)部署的相關(guān)資料,需要的朋友可以參考下2022-06-06
JSON與String互轉(zhuǎn)的實(shí)現(xiàn)方法(Javascript)
下面小編就為大家?guī)硪黄狫SON與String互轉(zhuǎn)的實(shí)現(xiàn)方法(Javascript) 。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-09-09
JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片輪播效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片輪播效果,點(diǎn)擊下標(biāo)切換到該圖片上,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
在JavaScript中構(gòu)建ArrayList示例代碼
這篇文章主要介紹了在JavaScript中構(gòu)建ArrayList,很實(shí)用,需要的朋友可以參考下2014-09-09
javascript 廣告移動(dòng)特效的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨avascript 廣告移動(dòng)特效的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
分享8個(gè)JavaScript庫(kù)可更好地處理本地存儲(chǔ)
這篇文章主要介紹了分享8個(gè)JavaScript庫(kù)可更好地處理本地存儲(chǔ),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
JavaScript switch case 的用法實(shí)例[范圍]
JavaScript switch case 的用法實(shí)例,大家可以參考下。2009-09-09

