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插件,正是在这样的状态下写出来的. ...
随机推荐
- 简易祖玛--canvas
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Python 实现清屏
使用Python的IDLE到某个程序节点时,需要清屏以提高清晰度. 但IDLE本身并没有这个功能,我们可以通过扩展来实现类似于Ctrl + L的清屏 资料来自于百度经验的 BinnLZeng 先制作一 ...
- 简述我理解的C#
第一章:开发入门 一.基础知识 1.计算机语言发展进程:计算机语言大致经过了机器语言.汇编语言.高级语言三个阶段的发展历程. 汇编语言:使用助记符来替代机器指令机器语言这种反人类的设计,阻碍了软 ...
- [git]入门-创建版本库
转载整理自:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013743256 ...
- Intellij IDEA xxx.properties变成纯文本模式解决方案
今天在创建xxx.properties的时候不知道按到了哪里,结果让它编程了纯文本模式,重命名这个文件或者删掉,重新创建这个同名文件,换一个项目,始终是文本文件类型,就估计不是项目问题,是intell ...
- ubuntu 18.04启动samba图形管理界面
启动samba图形界面管理器出现错误: Failed to load module "canberra-gtk-module" 或 SystemError: could not o ...
- 精进之路之CAS
CAS (Compare And Swap) 即比较交换, 是一种实现并发算法时常用到的技术,Java并发包中的很多类都使用了CAS技术,本文将深入的介绍CAS的原理. 其算法核心思想如下 执行函数: ...
- 精进之路之JMM
JMM (Java Memory Model) java内存模型 Java内存模型的抽象 Java线程之间的通信由Java内存模型(本文简称为JMM)控制,JMM决定一个线程对共享变量的写入何时对另一 ...
- java后端的知识学习
有良好的计算机基础知识,熟悉计算机网络技术以及常用的设计模式:有扎实的 Java 语言基础,熟悉 Java 多线程编程技术.JVM 虚拟机原理:熟悉J2EE体系架构,熟悉WebService.Spri ...
- 如何开发微信小程序学习
文件中 project.config.json是开发者工具为我们自动生成的一个开发者工具的配置文件,主要是保存了一些我们对开发者工具的个性化配置. 一个微信小程序应用至少要有两个文件 一个是app.j ...