本文结构：先说明，后代码。拷贝可直接运行。

一、demo结构：

二、文件引入

　　这些里面除了下面2个比较难找，其他的都很好找

　　bootstrap-table-resizable.js

　　colResizable-1.6.min.js

　　注意：需要将bootstrap-table.js中参数改为resizable: true

三、模拟的message.json数据准备

[

	{

		"name":"zhangsan1",

		"password":"1"

	},

	{

		"name":"zhangsan2",

		"password":"2"

	},

	{

		"name":"zhangsan3",

		"password":"3"

	},

	{

		"name":"zhangsan4",

		"password":"4"

	},

	{

		"name":"zhangsan5",

		"password":"5"

	},

	{

		"name":"zhangsan1",

		"password":"1"

	},

	{

		"name":"zhangsan2",

		"password":"2"

	},

	{

		"name":"zhangsan3",

		"password":"3"

	},

	{

		"name":"zhangsan4",

		"password":"4"

	},

	{

		"name":"zhangsan5",

		"password":"5"

	},

	{

		"name":"zhangsan1",

		"password":"1"

	},

	{

		"name":"zhangsan2",

		"password":"2"

	},

	{

		"name":"zhangsan3",

		"password":"3"

	},

	{

		"name":"zhangsan4",

		"password":"4"

	},

	{

		"name":"zhangsan5",

		"password":"5"

	}

]

四、table.html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>BootStrap Table使用</title>

		<meta name="viewport" content="width=device-width" />

		<SCRIPT SRC="JS/JQUERY-3.3.1.MIN.JS" TYPE="TEXT/JAVASCRIPT"></SCRIPT>

		<script src="js/bootstrap-table.js"></script>

		<script src="js/bootstrap.min.js"></script>

		<script src="js/bootstrap-table-resizable.js"></script>

		<script src="js/colResizable-1.6.min.js"></script>

		<link href="js/bootstrap.min.css" rel="stylesheet" />

		<link href="js/bootstrap-table.css" rel="stylesheet" />

	</head>

	<body>

		<div class="container">

			<table id="table" class="table-bordered"></table>

		</div>

		<script type="text/javascript">

			 $('#table').bootstrapTable({

			 	pagination:true,

			 	search:true,

			 	url:'/bootstrap_Table_resizable/json/message.json',

			 	columns:[{

			 		field:'name',

			 		title:'姓名'

			 	},{

			 		field:'password',

			 		title:'密码'

			 	}]

			 })

		</script>

	</body>

</html>

五、效果展示

BootStrap的table技术小结：数据填充、分页、列宽可拖动的更多相关文章

  1. table.appand(行数据) datagrid分页

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  2. Bootstrap Blazor Table 组件（四）自定义列生成

    原文链接:https://www.cnblogs.com/ysmc/p/16223154.html Bootstrap Blazor 官方链接:https://www.blazor.zone/tabl ...

  3. display：table标签来自动改变列宽 改变的同时table的整体宽度跟随变化

    发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...

  4. 自我反思--table的简单数据分页

      自我反思   几天没有写工作总结了,整个人都变得懒散了.公司的工作也确实是不紧张,对于我这种自制力不强的人简直是...(想不到词了),完全放了风了... 每天逛逛淘宝,买些乱七八糟其实并没有什么用 ...

  5. Jquery table元素操作-创建|数据填充|重置|隐藏行

    1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param ...

  6. 时间格式的处理和数据填充和分页---laravel

    时间格式文档地址:http://carbon.nesbot.com/docs/ 这是些时间格式,只需要我们这么做就可以 我们在模板层,找到对应的模型对象那里进行处理就可以啦 2018-11-08 16 ...

  7. jQuery+bootstrap实现有省略号的数据分页

    1.前言 在前端通过ajax请求数据后,可以通过bootstrap实现分页.由于bootstrap只提供分页的按钮的样式.数据分页我们需要实现页码跳转,上一页下一页,数据过多显示省略号,点击省略号能快 ...

  8. BootStrap Table使用小结

    1.在当前表格的最后新增数据 $("#data_module_table").bootstrapTable('append', data.data);//data.data---- ...

  9. jQuery.fill 数据填充插件

    博客园的伙伴们,大家好,I'm here,前段时间特别的忙,只有零星分散的时间碎片,有时仰望天空,有时发呆,有时写代码,正如下面给大家介绍的这个jQuery.fill插件,正是在这样的状态下写出来的. ...

随机推荐

  1. DataGridView中的DataGridViewComboBoxColumn 让其值改变联动

    在工作中自己也遇到过这类问题, 最近也有很多人问我这个问题, 就此机会写出来记录一下． 首先,顾名思义,值改变事件我们会想到 dataGridView1_CellValueChanged 这个事件,想 ...

  2. ESP32搭建4.esp32官方程序下载与串口读取

    上一篇写到esp-idf的整体环境搭建,本文主要讲讲如何将examples中的例子烧写到ESP32的flash中,以及如何通过linux串口进行调试. 一. Esp32程序下载 1.Ctrl+Alt+ ...

  3. Dictionary集合运用

    Dictionary基础定义: 从一组键(key)到一组值(value)的映射,每一个添加项都是由一个值及其相关联的键组成: 任何键都必须是唯一的: 键不能为空引用的null(VB中的Nothing) ...

  4. mybatis 注解的方式批量插入，更新数据

    一,当向数据表中插入一条数据时,一般先检查该数据是否已经存在,如果存在更新,不存在则新增  使用关键字  ON DUPLICATE KEY UPDATE zk_device_id为主键 model  ...

  5. Python字符串与格式化的一点用法

    #python的基本语法网上已经有很多详细的解释了,写在这里方便自己记忆一些 1.python于C语言不同的是,python没有字符的概念,所谓的字符就是长度为1的字符串,使用切片或者索引同样可以对字 ...

  6. [py]Win10下的pip/pip3 install 导致utf-8编码问题的解决方案

    置顶感谢:http://blog.csdn.net/qq_33530388/article/details/68933201 今天安装时遇到了windows下棘手的问题 UnicodeDecodeEr ...

  7. 三张图搞懂JavaScript的原型对象与原型链

    对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张 ...

  8. UML与软件建模：第二次作业（类图中类的表示）

    一.类图 (1)类图定义 类图,是UML(统一建模语言)中用于描述"类"以及"类与类"之间的示意图.它形象的描述出了系统的结构,帮助人们理解系统. 类图是在&q ...

  9. 接口自动化：pytest----环境搭建

    出处:https://www.cnblogs.com/yoyoketang/p/9356693.html 前言: python鄙视链:pytest 鄙视 > unittest 鄙视 > r ...

  10. 芯片烧录器编程AT24C02

    网上买了两款芯片烧录器,因为项目用的到.芯片以后的类型可能是IIC 接口的.就选则了一个IIC接口的AT24C02EEPROM.进行尝试.手头上没有这款芯片. 就想起自己单片机上有这款芯片.然后就开始 ...