直接上代码：

<!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. Spring 框架（一）

    1 spring框架概述 1.1 什么是spring l Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert ...

  2. qt 创建资源文件

    我们编写的gui可能需要一些额外的资源(比如贴图用的图片),可用资源文件统一管理.以下以图片为例. 用qt creator 打开工程,为工程新建资源文件: 命名为“项目名.prc”,(此处为“cloc ...

  3. java音频播放器

    java音频播放器备份,支持wav,mp3 都是摘抄于网络,wav播放,mp3播放 播放wav版本 包: 不需要其他jar包 代码: package com; import javax.sound.s ...

  4. mac phpstrom 环境配置

    因为mac下自带php,但是没有环境(ini文件)所有需要自己重新安装一下: curl -s http://php-osx.liip.ch/install.sh | bash -s 5.5 # 5.5 ...

  5. git下的团队合作模型及git基础知识汇集

    https://www.atlassian.com/git/tutorials/syncing/git-fetch Syncing svn使用单个中央库来作为开发者之间沟通的桥梁,而协同合作是通过在开 ...

  6. Linux 虚拟机虚拟网卡问题导致无法连接问题

    问题描述 当 Linux 虚拟机启动时,通过串口输出或者启动日志, 观察到虚拟网卡启动或者初始化故障, 导致虚拟机无法连接. 问题分析 常见的超时报错范例如下: CentOS 复制 Bringing ...

  7. SQL Server ->> FileTable

    FileTable是SQL Server 2012的新特性之一.它是基于SQL Server 2008的FILESTREAM特性上而来的,允许我们把Windows文件存储在SQL Server中,让S ...

  8. Linux(centos7)安装maven3.5

    1.创建一个maven文件夹 [root@MiWiFi-R3-srv ~]# mkdir /usr/local/maven 1 2.上传apache-maven-3.5.0-bin.tar.gz到/u ...

  9. [问题记录]libpomelo编译报错：ssize_t重定义

    1. 时间:2015/01/16 描述:添加libpomelo到cocos2dx项目,报错如下图所示: 解决: 修改代码,源代码: #if !defined(_SSIZE_T_) && ...

  10. DESCRIBE:When you mouse click right-side is open an application and click left-side is attribution.

    DESCRIBE:When  you mouse click right-side is open an application and click left-side is attribution. ...