bootstrap table onLoadSuccess加載服務端數據成功事件

bootstrap table onLoadSuccess加載服務端數據成功的事件，該事件的作用是什么呢？服務端返回自己格式的數據，他大不可能為了PC端還是移動端分別適配不同的JSON格式，這時前端就需要把服務器端返回的數據轉換成自己需要的JSON格式數據。而bootstrap table 在綁定數據渲染之前回回調onLoadSuccess事件，給你要機會去處理服務端返回的數據格式。該事件還是非常有用的。

onLoadSuccess事件

服務器端返回數據成功的事件，返回參數如下。

參數名稱說明

data服務器端返回的數據格式，如[{id:1},{id:2}]

綁定onLoadSuccess事件方法一$('#table').bootstrapTable({

columns: columns, //列對象

data: data, //要顯示的數據對象

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;

}

//設置需要顯示的列

var columns = [{

field: 'Id',

title: '編號'

}, {

field: 'ProductName',

title: '名稱'

}, {

field: 'StockNum',

title: '庫存'

}];

//bootstrap table初始化數據

$('#table').bootstrapTable({

columns: columns,

classes: "table table-bordered table-striped table-sm ", //設置表格樣式

height:400,

//******服務器端分頁設置****

url: "/package/bootstrap-table-1.14.1/data.json", //服務器返回數據的網址

method: 'GET', //數據請求方式

sidePagination:'server',

search:true, //******開啟搜索框****//

searchOnEnterKey:false, //******回車后執行搜索****//

pagination:true,

pageNumber:1,

pageSize:2,

pageList:"[10, 20, 50, 200]",

paginationHAlign:"left",

paginationDetailHAlign:"right",

//******服務器端分頁設置****

onLoadSuccess:function(data)

{

alert(JSON.stringify(data));

}

});

總結

以上是生活随笔為你收集整理的bootstraptable 加载完成_bootstrap table onLoadSuccess加载服务端数据成功事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。