直接上代码：

<!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简单使用（动态加载数据）的更多相关文章

  1. TreeView简单的动态加载数据

    简单的小记录,省得去看控件属性详情了,基本常用的属于就几个 先是判断根节点是否存在控件中,如果不存在则创建,之前要添加了节点同样的方法 把根节点传到子节点的方法中,再判断是否在根节点里存在子节点,如果 ...

  2. echarts官网上的动态加载数据bug被我解决。咳咳/。

    又是昨天,为什么昨天发生了这么多事.没办法,谁让我今天没事可做呢. 昨天需求是动态加载数据,画一个实时监控的折线图.大概长这样. 我屁颠屁颠的把代码copy过来,一运行,caocaocao~bug出现 ...

  3. asp.net c# select 动态加载数据

    1.说明通过 asp.net,利用jQuery ,c#语言给 select控件动态加载数据.前端页面使用的是.aspx类型的HTML页面,后台使用MVC上的controller控制器 2.webcon ...

  4. Extjs-树 Ext.tree.TreePanel 动态加载数据

    先上效果图 1.说明Ext.tree.Panel 控件是树形控件,大家知道树形结构在软件开发过程中的应用是很广泛的,树形控件的数据有本地数据.服务器端返回的数据两种.对于本地数据的加载,在extjs的 ...

  5. AppCan学习笔记----关闭页面listview动态加载数据

    AppCan页面关闭 AppCan 的页面是由两个HTML组成,如果要完全关闭的话需要在主HTML eg.index.html中关闭,关闭方法:appcan.window.close(-1); 管道 ...

  6. 微信小程序（五） 利用模板动态加载数据

    利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:

  7. ASP.NET MVC动态加载数据

    ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分:  Source Code 上图中,有一行代码: <tbody ...

  8. js实现滚动条来动态加载数据

    主要angular2+es6 data:Array<any> //展示的数据 allData:Array<any> //全部的数据 size:number = 10 //每次动 ...

  9. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  10. js动态加载数据并合并单元格

    js动态加载数据合并单元格, 代码如下所示,可复制直接运行: <!DOCTYPE HTML> <html lang="en-US"> <head> ...

随机推荐

  1. ideal key

    常用快捷键 设置快捷键:File -> Settings -> IDE Settings -> Keymap -> 选择“eclipse” -> 然后“Copy”一份 - ...

  2. ERP与电子商务的集成

    目前现状: 一般来说,企业中存在三种流:物资流.资金流和信息流,其中,信息流不是孤立存在的,它与物资流和资金流密切相关,反映了物资和资金流动前.流动中和流动后的状况. 电子商务与ERP被分裂开来,没有 ...

  3. CCF201409-1相邻数对

    试题编号: 201409-1 试题名称: 相邻数对 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定n个不同的整数,问这些数中有多少对整数,它们的值正好相差1. 输入格式 ...

  4. Installing TensorFlow on Ubuntu

    1.安装方法有4种,官方推荐是第一种. virtualenv(官方推荐)    "native" pip    Docker    Anaconda 2.基于virtualenv的 ...

  5. asp.net ashx导出excel到前台

    最近有一个项目使用以前的ashx,不能使用FileResult,只有通过response返回拼接好的字符串.但是通过查阅资料拼接的字符串总是提示文件格式不匹配,虽然能正常打开,但是体验很不好,在此总结 ...

  6. Python学习---重点模块之logging

    日志级别 日志级别  critical > error > warning > info > debug, 默认是从warning开始打印 import logging # 日 ...

  7. json转换为tree对象（递归）

    const newTeam = function (data, parentId) { 2 let itemArr = []; 3 for (let i = 0; i < data.length ...

  8. OC基础数据类型-NSString

    1.字符串的初始化 //字符串的初始化 NSString *str = @"Hello world!"; NSString *str2 = [[NSString alloc] in ...

  9. PTA练习题之7-1 出租车计价（15 分）

    7-1 出租车计价(15 分) 本题要求根据某城市普通出租车收费标准编写程序进行车费计算.具体标准如下: 起步里程为3公里,起步费10元: 超起步里程后10公里内,每公里2元: 超过10公里以上的部分 ...

  10. 使用log4j让日志写入数据库

    之前做的一个项目有这么个要求,在日志管理系统里,需要将某些日志信息存储到数据库里,供用户.管理员查看分析.因此我就花了点时间搞了一下这一功能,各位请看. 摘要:我们知道log4j能提供强大的可配置的记 ...