Bootstrap table使用方法详细介绍


Posted in Javascript onDecember 09, 2016

bootstrap-table是一个非常好用的表格插件,提供了很多工具及分页、搜索等功能。

首先我们需要下面几个文件,

<span style="font-size:18px;"><!-- bootstrap table --> 
<script type="text/javascript" src="${pageContext.request.contextPath}/res/jquery-1.10.2/jquery.js"></script> 
<!-- bootstrap --> 
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/res/bootstrap/css/bootstrap.css"/> 
<script type="text/javascript" src="${pageContext.request.contextPath}/res/bootstrap/js/bootstrap.js"></script> 
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/res/bootstrap-table/bootstrap-table.css"/> 
<script type="text/javascript" src="${pageContext.request.contextPath}/res/bootstrap-table/bootstrap-table.js"></script> 
<!-- bootstrap table中文包 --> 
<script type="text/javascript" src="${pageContext.request.contextPath}/res/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script></span>

中文包好像可以防止某些bug

如果你单独引入这些文件而导致样式出错,请下载完整的bootstrap-table

下面是bootstrap-table的加载

<span style="font-size:18px;"><script type="text/javascript"> 
$(function () { 
 
 //1.初始化Table 
 var oTable = new TableInit(); 
 oTable.Init(); 
}); 
 
 
var TableInit = function () { 
 var oTableInit = new Object(); 
 //初始化Table 
 oTableInit.Init = function () { 
  $('#tb_departments').bootstrapTable({ 
   url: '${pageContext.request.contextPath}/AlarmInfo/list',   //请求后台的URL(*) 
   method: 'get',      //请求方式(*) 
   toolbar: '#toolbar',    //工具按钮用哪个容器 
   striped: false,      //是否显示行间隔色 
   cache: false,      //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) 
   pagination: true,     //是否显示分页(*) 
   sortable: false,      //是否启用排序 
   sortOrder: "asc",     //排序方式 
   queryParams: oTableInit.queryParams,//传递参数(*) 
   sidePagination: "server",   //分页方式:client客户端分页,server服务端分页(*) 
   pageNumber:1,      //初始化加载第一页,默认第一页 
   pageSize: 10,      //每页的记录行数(*) 
   pageList: [10, 25, 50, 100],  //可供选择的每页的行数(*) 
   search: false,      //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 
   strictSearch: true, 
   showColumns: true,     //是否显示所有的列 
   showRefresh: false,     //是否显示刷新按钮 
   minimumCountColumns: 2,    //最少允许的列数 
   clickToSelect: true,    //是否启用点击选中行 
   height: 500,      //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 
   uniqueId: "id",      //每一行的唯一标识,一般为主键列 
   showToggle:true,     //是否显示详细视图和列表视图的切换按钮 
   cardView: true,     //是否显示详细视图 
   detailView: false,     //是否显示父子表 
   columns: [{ 
    checkbox: true 
   }, { 
    field: 'Id', 
    title: '编号' 
   }, { 
    field: 'Name', 
    title: '姓名' 
   }, { 
    field: 'Type', 
    title: '类型' 
   },{ 
    field: 'Time', 
    title: '时间' 
   } 
    
   ] 
  }); 
 }; 
 
</script> 
 
<head> 
<body> 
 <div class="panel-body" style="padding-bottom:0px;"> 
   <table id="tb_departments"></table> 
  </div> 
</body> 
</head> 
</span><span style="font-size:18px;"> 
</span>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
基于JQUERY的多级联动代码
Jan 24 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
vue项目中使用多选框的实例代码
Jul 22 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 #Javascript
任意Json转成无序列表的方法示例
Dec 09 #Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 #Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 #Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 #Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 #Javascript
Angular.Js的自动化测试详解
Dec 09 #Javascript
You might like
php实现的漂亮分页方法
2014/04/17 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
理解Javascript_13_执行模型详解
2010/10/20 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Python3 中文文件读写方法
2018/01/23 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
举例讲解Python常用模块
2019/03/08 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
护理专业的自荐信
2013/10/22 职场文书
职业教育毕业生求职信
2013/11/09 职场文书
办理护照介绍信
2014/01/16 职场文书
将相和教学反思
2014/02/04 职场文书
个人自我评价范文
2014/02/05 职场文书
新年爱情寄语
2014/04/08 职场文书
本科毕业生自荐信
2014/05/26 职场文书
倡议书格式
2014/08/30 职场文书
西双版纳导游词
2015/02/03 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
针对吵架老公保证书
2015/05/08 职场文书
单位综合评价意见
2015/06/05 职场文书
美元符号 $
2022/02/17 杂记