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

一、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. lintcode 程序题

    1500802025 才仁代吉 第一链表类参数是整形链表,广度优先遍历: 队列是先进先出的概念 所以使用于保存节点 2插树的话 1个节点有个2个子节点 先将根节点入队,然后访问根节点数据(此时让根节点 ...

  2. fineui排序问题

    后台: private void BindGrid()    { // 1.获取当前分页数据        DataSet dataSet = GetPagedDataTable();        ...

  3. Python之OS内置模块

    os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cd os.curd ...

  4. 用tensorflow实现最简单的神经网络

    import tensorflow as tfimport numpy as np def add_layer(inputs,in_size,out_size,activation_function= ...

  5. IntelliJ IDEA 使用教程(2019图文版) -- 从入门到上瘾

    IntelliJ IDEA 使用教程(2019图文版) -- 从入门到上瘾   前言:IntelliJ IDEA 如果说IntelliJ IDEA是一款现代化智能开发工具的话,Eclipse则称得上是 ...

  6. ASP.NET MVC中，动态处理页面静态化

    首先解释一下什么是动态处理页面静态化 对于需要静态化的页面,第一次访问某个Action时,会先执行Action,并在页面渲染后向Response和服务器中网站的目录下都写入需要返回的html,而第二次 ...

  7. 上传文件的三种方式xhr,ajax和iframe及上传预览

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Unity ECS 初探

    1.安装 安装两个包 2.初探 实例化 注:实例化的实体并不会在Hierarchy视图里面显示,可在EntityDebugger窗口里面显示,因此需要显示的话需要添加Rendermeshcompone ...

  9. for each ;for in;for of 三者的区别

    for each: for each 方法没办法用break语句跳出循环并且无法用return语句从函数体 内返回 for in: 1.index 值 会是字符串(String)类型 2.循环不仅会遍 ...

  10. jar包是干什么用的

    1.JAR(Java ARchive)是将一系列文件到单个压缩文件里,就象Zip那样.但是,同Java中其他任何东西一样,JAR文件是跨平台的,所以不必关心涉及具体平台的问题.2.jar包就是别人已经 ...