Bootstrap Data Table简单使用(动态加载数据)
直接上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-table.css" />
<script src="../js/jquery-1.12.4.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table.js"></script>
<script src="../js/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<table class="table" id="dataShow" > </table>
<script>
$(function () {
//开始装载数据
$("#dataShow").bootstrapTable({
url: "http://www.zunyaohui.com/data/?action=product&class=0&type=list&option=a1_b1_c1_d1_e3_&keyword=",
sortName: "CompanyShortname",//排序列
striped: true,//條紋行
sidePagination: "server",//服务器分页
showRefresh: true,//刷新功能
clickToSelect: false,//选择行即选择checkbox
singleSelect: true,//仅允许单选
pagination: true,//启用分页
pageCount: 10,//每页行数
pageIndex: 0,//起始页
pageList: [10, 25, 50, 100],//可供选择的每页的行数
escape: true,//过滤危险字符
queryParams: getParams,//携带参数
dataType: "jsonp",
columns: [
{
title: '发行机构',
field: 'CompanyShortname',
align: 'center',
valign: 'middle'
},
{
title: '产品简称',
field: 'ProductShortname',
align: 'center',
valign: 'middle',
},
{
title: '预期年收益',
field: 'IncomeRate',
align: 'center',
formatter:function(value,row,index){
return value+"0%";
}
},
{
title: '起始资金',
field: 'AmountLow',
align: 'center'
},
{
title: '产品期限',
field: 'Term',
align: 'center',
},
{
title: '付息方式',
field: 'ServicingWay',
align: 'center',
},
{
title: '投资领域',
field: 'InvestmentField',
align: 'center',
},
{
title: '预约',
field: 'id',
align: 'center',
formatter:function(value,row,index){
return '<a href="#" mce_href="#" onclick="reserve(\''+ row.id + '\')">预约</a> ';
}
}
],
onLoadSuccess: function (ee)
{
//查询数据成功
console.info(ee); }
});
});
//默认加载时携带参数
function getParams(parm) {
return { page: (parm.offset / parm.limit)+ 1, rows:10};
}
//预约功能
function reserve(parm) {
alert("进行预约操作!");
}
</script>
</body>
</html>
Bootstrap Data Table简单使用(动态加载数据)的更多相关文章
- TreeView简单的动态加载数据
简单的小记录,省得去看控件属性详情了,基本常用的属于就几个 先是判断根节点是否存在控件中,如果不存在则创建,之前要添加了节点同样的方法 把根节点传到子节点的方法中,再判断是否在根节点里存在子节点,如果 ...
- echarts官网上的动态加载数据bug被我解决。咳咳/。
又是昨天,为什么昨天发生了这么多事.没办法,谁让我今天没事可做呢. 昨天需求是动态加载数据,画一个实时监控的折线图.大概长这样. 我屁颠屁颠的把代码copy过来,一运行,caocaocao~bug出现 ...
- asp.net c# select 动态加载数据
1.说明通过 asp.net,利用jQuery ,c#语言给 select控件动态加载数据.前端页面使用的是.aspx类型的HTML页面,后台使用MVC上的controller控制器 2.webcon ...
- Extjs-树 Ext.tree.TreePanel 动态加载数据
先上效果图 1.说明Ext.tree.Panel 控件是树形控件,大家知道树形结构在软件开发过程中的应用是很广泛的,树形控件的数据有本地数据.服务器端返回的数据两种.对于本地数据的加载,在extjs的 ...
- AppCan学习笔记----关闭页面listview动态加载数据
AppCan页面关闭 AppCan 的页面是由两个HTML组成,如果要完全关闭的话需要在主HTML eg.index.html中关闭,关闭方法:appcan.window.close(-1); 管道 ...
- 微信小程序(五) 利用模板动态加载数据
利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:
- ASP.NET MVC动态加载数据
ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分: Source Code 上图中,有一行代码: <tbody ...
- js实现滚动条来动态加载数据
主要angular2+es6 data:Array<any> //展示的数据 allData:Array<any> //全部的数据 size:number = 10 //每次动 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- js动态加载数据并合并单元格
js动态加载数据合并单元格, 代码如下所示,可复制直接运行: <!DOCTYPE HTML> <html lang="en-US"> <head> ...
随机推荐
- Java 监听器,国际化
1. 监听器 1.1 概述 监听器: 主要是用来监听特定对象的创建或销毁.属性的变化的! 是一个实现特定接口的普通java类! 对象: 自己创建自己用 (不用监听) 别人创建自己用 (需要监听) Se ...
- jQuery Callback函数的用法
在动画100%完成后,调用callback函数 语法如下 $(selector).hide(speed, callback); <!-- html部分 --> <button> ...
- vs2010开发activex(MFC)控件/ie插件(二):js传参数
原文:http://blog.csdn.net/yhhyhhyhhyhh/article/details/50802075 js传参数给activex控件. 过程为:js变量通过activex类的属 ...
- ES入门——数组的扩展
1.Array.from() 该方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象,包括ES6新增的数据结构Set和Map.下面是 ...
- idea打jar包
昨天碰到个问题:使用idea打成jar包,但是在测试环境一直报错.参考: http://blog.csdn.net/aotian16/article/details/52198378 之后发现原来的j ...
- JS获取屏幕分辨率以及当前对象大小等
<script type="text/javascript"> function getInfo(){ var s = ""; s += " ...
- 【源码分析】cocostudio场景编辑器的触发器逻辑
去看场景编辑器的差不多都可以看到有模拟器的设置(菜单栏的设置).默认是选择cocostudio安装路径中的Simulator.exe这个模拟器,看官网介绍是自己可以选择模拟器,而且公开源代码可以按需设 ...
- dll的制作
https://blog.csdn.net/guanchanghui/article/details/1621031
- shell命令详解
sed命令 将文本input.txt中含有”姓名”字符串的行中的谢朝辉替换成扎巴依 sed -e '/姓名/s/谢朝辉/扎巴依/g' input.txt 将input.txt中第n(5)行替换成”ji ...
- ZT 3.1 依赖倒置原则的定义
设计模式精解-GoF 23 种设计模式解析附 C++实现源码http://www.mscenter.edu.cn/blog/k_eckelP58 Template 模式获得一种反向控制结构效果,这也是 ...