直接上代码：

<!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. Codeforces Round #394 (Div. 2)

    前一半是刚刚打完比赛的时候写的……不知为啥手腕有点僵,估计是前一个小时用力过度了吧= = 前四题看着还好,后两题就有点懵逼了……现在还不知道E题的题意到底是啥…… 不管了……还没找着官方题解,贴一下自 ...

  2. JavaScript 递归法排列组合二维数组2

    <html> <head> <title>二维数组排列组合</title> </head> <body> <div id= ...

  3. IDEA 自动生成serialVersionUID

    场景:刚转到用IDEA,因为需要生成serialVersionUID,并没有自动生成. 转自:http://blog.csdn.net/liuzongl2012/article/details/451 ...

  4. hive配置参数的说明：

    hive.ddl.output.format:hive的ddl语句的输出格式,默认是text,纯文本,还有json格式,这个是0.90以后才出的新配置: hive.exec.script.wrappe ...

  5. Jenkins 修改主目录正解 workspace

    方法一: 停止Jenkins服务 net stop Jenkins 找到Jenkins安装目录,Config.config文件,找到WorkSpaceDir配置,修改为目标地址,保存. 启用Jenki ...

  6. python（day1-11）

    day1:Python入门 day2:数字类型字符编码 day3:函数 day4:模块与包 day5:常用模块 day6:面向对象 day8:异常处理 day9:网络编程 day10:并发编程 day ...

  7. android webview 播放 video经验总结

    在目前PC浏览器上,对video的支持基本都没什么问题了.但是如果用webview去跑这样的页面就会遇到许多问题. 下面一段html <!DOCTYPE html> <html> ...

  8. SQL-SERVER学习（二） 数据表的存储过程

    在C语言的程序设计中,会把一个重复使用的功能提取出来,做成一个的函数,这样就可以减少冗余代码,且更方便维护.调用.在面向对象的设计语言中,会把一个重复使用的功能提取出来,做成一个类,同样也是为了减少冗 ...

  9. 【Leetcode】【Medium】Letter Combinations of a Phone Number

    Given a digit string, return all possible letter combinations that the number could represent. A map ...

  10. iOS文件处理类

    iOS文件处理类 这是一个用来简化iOS中关于文件操作的一个类,所有方法都为类方法. Source File.h // // File.h // FileManager // // http://ho ...