直接上代码：

<!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. 【Python】面向对象编程思想

    概念 "笔"作为一个抽象的概念,可以被看成是一个类.而一支实实在在的笔,则是"笔"这种类型的对象. 一个类可以有属于它的函数,这种函数被称为类的"方法 ...

  2. C++模板详解（系转载，但是个人添加了一些内容）

    原文地址:http://www.cnblogs.com/gw811/archive/2012/10/25/2738929.html 零.概述 模板是C++支持参数化多态的工具,使用模板可以使用户为类或 ...

  3. 如何在 Linux 虚拟机上扩展根文件系统

    问题描述 通过 Azure 平台部署的 Linux 虚拟机默认的根文件系统容量有限,需要进行扩展. 问题分析 由于 Azure 平台部署的 Linux 虚拟机默认根文件系统容量比较小,客户在使用过程中 ...

  4. C#连接SQL Server测试

    string con, sql; con = "Server=192.168.31.26;Database=TestDB;user=kala;pwd=Password"; sql ...

  5. Hadoop学习---CentOS中hadoop伪分布式集群安装

    注意:此次搭建是在ssh无密码配置.jdk环境已经配置好的情况下进行的 可以参考: Hadoop完全分布式安装教程 CentOS环境下搭建hadoop伪分布式集群 1.更改主机名 执行命令:vi  / ...

  6. SAP R/3系统的R和3分别代表什么含义，负载均衡的实现原理

    1972年,SAP诞生,推出了RF系统(实时财务会计系统), 后来命名为R1. R指Real time.3既指第三代系统,又代表3层架构. 三层架构分别为下图的Presentation server ...

  7. 勒让德定理---阶乘中素因子p的指数

  8. SpringMVC WEB应用上传照片的实现

    使用是SpringMVC+Hibernate搭建的WEB应用,使用jsp写的前端页面. 如何将文件上传到服务器呢?我这里使用的是Multipart的形式将文件上传. 这里有两大步:一是配置multip ...

  9. 【剑指offer】字符串的组合

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/mmc_maodun/article/details/26405471 转载请注明出处:http:// ...

  10. Kali Linux重设root密码

    许久不用的Kali,某天打开竟忘了密码! 网上的方法颇为简单,遂准备亲自试一下. #光标移动到第二行的“恢复模式”,按E进入[编辑模式]                                 ...