bootstraptable 加载完成_bootstrap table onLoadSuccess加载服务端数据成功事件
bootstrap table onLoadSuccess加載服務(wù)端數(shù)據(jù)成功事件
bootstrap table onLoadSuccess加載服務(wù)端數(shù)據(jù)成功的事件，該事件的作用是什么呢？服務(wù)端返回自己格式的數(shù)據(jù)，他大不可能為了PC端還是移動端分別適配不同的JSON格式，這時前端就需要把服務(wù)器端返回的數(shù)據(jù)轉(zhuǎn)換成自己需要的JSON格式數(shù)據(jù)。而bootstrap table 在綁定數(shù)據(jù)渲染之前回回調(diào)onLoadSuccess事件，給你要機會去處理服務(wù)端返回的數(shù)據(jù)格式。該事件還是非常有用的。
onLoadSuccess事件
服務(wù)器端返回數(shù)據(jù)成功的事件，返回參數(shù)如下。
參數(shù)名稱說明
data服務(wù)器端返回的數(shù)據(jù)格式，如[{id:1},{id:2}]
綁定onLoadSuccess事件方法一$('#table').bootstrapTable({
columns: columns, //列對象
data: data, //要顯示的數(shù)據(jù)對象
onLoadSuccess: function (data) {
alert(JSON.stringify(data));
}
});
綁定onLoadSuccess事件方法二$('#table').on('load-success.bs.table', function (e,data) {
alert(JSON.stringify(data));
});
完整代碼
Bootstrap Table onLoadSuccess例子.table-demo {
width: 80%;
margin: 30px auto 0px auto;
}
.fixed-table-header {
border-right: solid 1px #ddd;
border-top: solid 1px #ddd;
}
.fixed-table-header table {
border-top: solid 0px #ddd !important;
margin-top:-1px;
}
//設(shè)置需要顯示的列
var columns = [{
field: 'Id',
title: '編號'
}, {
field: 'ProductName',
title: '名稱'
}, {
field: 'StockNum',
title: '庫存'
}];
//bootstrap table初始化數(shù)據(jù)
$('#table').bootstrapTable({
columns: columns,
classes: "table table-bordered table-striped table-sm ", //設(shè)置表格樣式
height:400,
//******服務(wù)器端分頁設(shè)置****
url: "/package/bootstrap-table-1.14.1/data.json", //服務(wù)器返回數(shù)據(jù)的網(wǎng)址
method: 'GET', //數(shù)據(jù)請求方式
sidePagination:'server',
search:true, //******開啟搜索框****//
searchOnEnterKey:false, //******回車后執(zhí)行搜索****//
pagination:true,
pageNumber:1,
pageSize:2,
pageList:"[10, 20, 50, 200]",
paginationHAlign:"left",
paginationDetailHAlign:"right",
//******服務(wù)器端分頁設(shè)置****
onLoadSuccess:function(data)
{
alert(JSON.stringify(data));
}
});
總結(jié)
以上是生活随笔為你收集整理的bootstraptable 加载完成_bootstrap table onLoadSuccess加载服务端数据成功事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js 对一个字段去重_JS单行、多行文本
- 下一篇： mysql 查询每人每天_PHP+MyS