直接上代码：

<!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. vue中数组删除，页面没重新渲染

    创建一个组件时,数据类型是数组,在删除这个数组中的数据时,数组中的数据是对的,但页面渲染的数据却不对. 举例:(不一定复现) <ul> <li v-for="(item, ...

  2. 基础架构之Mongo

    项目需求中,有些需求的数据是不必长时间持久化或一些非结构化设计,这时可以考虑用Mongo作为存储,具体介绍介绍详见官方 https://www.mongodb.com,这篇文章主要介绍安装及启用身份认 ...

  3. SpringBoot2.0+Mybatis+PageHelper+Redis实现缓存

    1.在maven引入相关的依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactI ...

  4. C#性能优化实践(转载)

    原文地址http://www.infoq.com/cn/articles/C-sharp-performance-optimization?utm_source=infoq&utm_mediu ...

  5. python mqtt client publish操作

    使用Python库paho.mqtt.client 模拟mqtt client 连接broker,publish topic. #-*-coding:utf-8-*- import paho.mqtt ...

  6. ComboBox赋值ItemsSource数据源的时候会触发SelectionChanged改变事件的解决办法

    我用的方法是设置开关 bool flag = false;//默认开关关闭(全局变量) flag = false;在赋值数据源之前设置关闭box.ItemsSource = lstProperty;/ ...

  7. CentOS 7 Nginx+PHP环境搭建！

    1.Nginx 安装 rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx. ...

  8. 我的第一个Python随笔

    自学Python也很长时间了,注册博客园写了第一篇随笔.之前想过很多次,但是始终不知道该怎么开始,内容如何,现在想想,随笔嘛,是自己的想法,也自己的实践,又是自己的锻炼.话不多说,开始今天的正式内容. ...

  9. mongoDB 固定集合(capped collection)

    固定集合(Capped Collection)是一种尺寸固定的“循环”集合,可提供高效的创建.读取.删除等操作.这里所指的“循环”的意思是,当分配给集合的文件尺寸耗尽时,就会自动开始删除最初的文档,不 ...

  10. 编码 Unicode utf-8

    编码的发展史: 一开始计算机只在美国使用.8位的字节可以组合出256种不同的状态.他们将0到32种状态规定为”控制码“,后来又用其中32号以后的状态表示空格.标点符号.数字和大小写字母.这样一直编到了 ...