BootStrap的table技术小结：数据填充、分页、列宽可拖动
本文结构：先说明，后代码。拷贝可直接运行。
一、demo结构：
二、文件引入
这些里面除了下面2个比较难找，其他的都很好找
注意：需要将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技术小结：数据填充、分页、列宽可拖动的更多相关文章
- table.appand(行数据) datagrid分页
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- Bootstrap Blazor Table 组件（四）自定义列生成
原文链接:https://www.cnblogs.com/ysmc/p/16223154.html Bootstrap Blazor 官方链接:https://www.blazor.zone/tabl ...
- display：table标签来自动改变列宽 改变的同时table的整体宽度跟随变化
发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...
- 自我反思--table的简单数据分页
自我反思 几天没有写工作总结了,整个人都变得懒散了.公司的工作也确实是不紧张,对于我这种自制力不强的人简直是...(想不到词了),完全放了风了... 每天逛逛淘宝,买些乱七八糟其实并没有什么用 ...
- Jquery table元素操作-创建|数据填充|重置|隐藏行
1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param ...
- 时间格式的处理和数据填充和分页---laravel
时间格式文档地址:http://carbon.nesbot.com/docs/ 这是些时间格式,只需要我们这么做就可以 我们在模板层,找到对应的模型对象那里进行处理就可以啦 2018-11-08 16 ...
- jQuery+bootstrap实现有省略号的数据分页
1.前言 在前端通过ajax请求数据后,可以通过bootstrap实现分页.由于bootstrap只提供分页的按钮的样式.数据分页我们需要实现页码跳转,上一页下一页,数据过多显示省略号,点击省略号能快 ...
- BootStrap Table使用小结
1.在当前表格的最后新增数据 $("#data_module_table").bootstrapTable('append', data.data);//data.data---- ...
- jQuery.fill 数据填充插件
博客园的伙伴们,大家好,I'm here,前段时间特别的忙,只有零星分散的时间碎片,有时仰望天空,有时发呆,有时写代码,正如下面给大家介绍的这个jQuery.fill插件,正是在这样的状态下写出来的. ...
随机推荐
- 简单的Java ee思维导图
- 磁盘挂载方法 fdisk parted
1创建磁盘分区 [root@web01 ~]# fdisk -cu /dev/sdc -c 关闭dos兼容模式-u 使用扇区进行分区 (默认位柱面)[root@web01 ~]# partprobe ...
- python入门之小栗子
1 点球小游戏: from random import choice score=[0,0]direction=['left','center','right'] def kick(): print ...
- 非关系数据库一Memcached
第三十四课 非关系数据库一Memcached 目录 一.nosql介绍 二.memrcached介绍 三.安装memcached 四.查看memcachedq状态 五.memcached命令行 六.m ...
- SharePoint Framework 在web部件中使用第三方样式 - 将第三方样式打到包中
博客地址:http://blog.csdn.net/FoxDave 有许多第三方库可以帮助我们构建丰富的SharePoint Framework客户端web部件.并且这些JavaScript脚本常常包 ...
- SQL Server用表组织数据
一.主键 主键作为表中的唯一标识,标识这一列不允许出现重复数据 如果两列或多列组合起来唯一标识表中的每一行,该主键叫“复合主键” 选择主键的原则 最少性 尽量选择单个键作为主键 ...
- python模块之time_random
把老师的资料放在最上面: 参考: http://www.cnblogs.com/yuanchenqi/articles/5732581.html 导入模块的方法: #!/usr/bin/env pyt ...
- java中外部类和内部类的访问控制符区别
外部类只有两种访问控制符,即public和default(包访问控制级别).原因:外部类的上一级程序单元是包,所以它只有两种作用域:同一个包内和任何位置,这样只需要用public和default即可, ...
- LimeSDR 无线信号重放攻击和逆向分析
原文链接:https://mp.weixin.qq.com/s/TBYKZR3n3ADo4oDkaDUeIA
- HTML表格布局
1 浏览器:接受浏览者的操作,然后帮浏览者去web服务器请求网页内容,然后展现成人人眼能够看得懂的可视化页面的软件. 2 IE是浏览器的一种.<ietest工具& ...