bootstraptable 加载完成_bootstrap table onLoadSuccess加载服务端数据成功事件
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加载服务端数据成功事件相关推荐
- bootstraptable 日期控件_bootstrap table插件使用说明demo
$(function(){ $('#table').bootstrapTable({ url:'manager/blog/list.json', method:'get', contentType:' ...
- bootstraptable 居中_bootstrap table合并行数据并居中对齐效果
本文实例为大家分享了bootstrap table合并行数据并居中对齐的具体代码,供大家参考,具体内容如下 渲染表格后进行数据行合并 onLoadSuccess: function (data) { ...
- bootstraptable 手册_bootstrap table表格使用方法详解
本文实例为大家分享了bootstrap table表格的使用方法,供大家参考,具体内容如下 1.进入页面,根据指定的URL加载数据(json格式) 2.加载成功,根据$table.bootstrapT ...
- APK加壳【2】内存加载dex实现详解
来源 本文要实验的方案同样来源于CSDN大牛Jack_Jia的一篇翻译博文: Android4.0内存Dex数据动态加载技术 原文的地址是 http://2013.hackitoergosum.org ...
- android 加载大长图,android加载长图片的方法
1.很多应用都有加载一张长图片,用户可以上下拉动图片. 自己没有好的想法,那只好百度咯.结果都说用webview来实现,好吧那就只好先试一下了. 2.自己写了简单的html,然后webview加载.图 ...
- oracle oci.dll无法加载_基于OGG 实现Oracle到Kafka增量数据实时同步
背景 在大数据时代,存在大量基于数据的业务.数据需要在不同的系统之间流动.整合.通常,核心业务系统的数据存在OLTP数据库系统中,其它业务系统需要获取OLTP系统中的数据.传统的数仓通过批量数据同步的 ...
- html页面判断其他div为空,将外部html加载到div中 - 页面加载然后变为空白
我确信这将会变成一件愚蠢的事情,但是自从我成为JavaScript noob以来,这里就变成了一件愚蠢的事情.将外部html加载到div中 - 页面加载然后变为空白 我想外部HTML内容加载到我的索引 ...
- Swift - 表格图片加载优化(拖动表格时不加载,停止时只加载当前页图片)
列表的单元格中包含有图片在开发中很常见.通常我们可以直接在tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIn ...
- php无法加载dll插件,php无法加载动态库怎么办
php无法加载动态库的解决办法:1.将PHP的集成包里的"libmySQL.dll"复制到system32目录下:2.将PHP的解压目录添加到PATH里:3.在Apache的配置文 ...
最新文章
- webservice mysql配置_Nginx配置WebService、MySQL、SQL Server、ORACLE等代理
- angularJs项目初建
- MySQL的变量分类总结
- 人口简史:我们曾经差一点就彻底没了
- mvc html绑定变量,c# – Asp.Net MVC 3使用变量对象进行自定义模型绑定
- Eclipse中导入maven项目 maven update project报“Cannot nest ‘xx/src/main/resources‘ inside ‘xx/src ……”
- 如何用EasyRecovery找回删除的文档(附注册机下载地址)
- java递归用for实现_用java实现的经典递归算法
- echarts柱状图的宽度
- Leetcode——495. Teemo Attacking
- 镁光 鸡血模式 linux,所以,镁光1100到底是不是全盘slc的模式?之前就几个帖子...
- 解决VAX 2210 不能识别 VS2017的问题
- php开源小程序直播,微信小程序直播
- 哈希算法-SHA-256-过程详解
- Ajax开发小结慎用AJAX框架
- iwconfig 安装_linux下安装无线驱动
- NORTON 杀毒怎么了?
- 经常出现空指针异常的场景之空指针给我死
- python paramiko_Python Paramiko模块的使用实际案例
- 第二个五年,左右横跳到P8年薪100w
热门文章
- oracle逻辑备份和物理备份,oracle数据库物理备份和逻辑备份区别
- mysql t添加注释_mysql—添加注释(comment)的用法
- 第一行代码学习笔记第四章——探究碎片
- 2015国产手机圈成绩单
- 2020年最全最简单KMP算法讲解
- vue中页面跳转传值_vue跳转方式(打开新页面)及传参操作示例
- js 加入debug后可以进入controller_新手入门Nest.js(四) 控制器路由
- layui table勾选框的修改_layui怎么设置checkbox勾选
- WebRTC / Jitsi / 架构
- 乐鑫代理启明云端分享|ESP32驱动1.54inch(240*240)彩屏