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

一、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. mysql的简单安装方法

    准备工作MySQL-Front与mysql-5.5.15-win32 开始安装 选择compelete,完整安装 自动弹出配置界面 选择标准配置 设置root密码 成功界面 MySQL-Front 的 ...

  2. Python标准库01正则表达式

    在学习网络爬虫的过程中,需要抓取网页的评论数,涉及到正则表达式,便顺便看了看.正则表达式是文字处理中常用的工具. 1正则表达式的常用字符串 .       任何单个字符 [] 字符集对单个字符给出取值 ...

  3. form表单提交到Servlet后,弹出对话框,然后在跳转页面

    在Servlet中添加一下代码即可 out.print("<script>alert('添加成功!');window.location='index.jsp';</scri ...

  4. jmeter遇到问题及解决办法

    1.要得到前一个sampler的响应信息,是加beanshell sampler 还是加beanshell postprocessor?   答:在http取样器后添加beanshell sample ...

  5. C# Vs2017启动调试,debug或者release调试状态闪一下程序就独立运行了

    最近发现一个没太大影响但是很奇怪的事情,编辑状态下点击调试,发现和之前的项目不一样,调试状态闪一下,程序就“独立了”,不受调试状态的控制了. 找了半天才发现,是在program.cs里加了一段代码引起 ...

  6. Mysql 存储过程查询结果赋值到变量的方法

    drop table if exists test_tbl; create table test_tbl (name varchar(20), status int(2)); insert into ...

  7. Springboot 的错误处理功能的实现

    一.页面的形式返回 直接在resources的目录下创建public/error的路径,然后创建5xx.html或者4xx.html文件,如果出错就会自动跳转的相应的页面. 二.cotroller的形 ...

  8. JS属性修改

    document.getElementById('p1').style.visibility='visible' document.getElementById('p1').style.visibil ...

  9. matlab程序设计

    一.M文件 1.脚本文件 (1)英文字母开头命名 (2)所产生的所有变量驻留在base workspace,只要不用clear,就只有关闭MATLAB,才会被删除 2.函数文件 (1)function ...

  10. 从.net parallel角度解读spark

    对于我这样一个一直工作在.net平台上的developer来讲,Hadoop,Spark,HBase等这些大数据名词比较陌生,对于分布式计算,.net上也有类似的Parallel(我说的不是HDIns ...