Bootstrap table使用方法详细介绍

2024-09-27 19:16:14

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）

Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 主要功能分页,即时搜索和排序几乎支持任何数据源:DOM, javascript, Ajax 和服务器处理支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns -- 丰富多样的option和强大的API 支持国际化超过2900+个单元测试免
BootstrapTable refresh 方法使用实例简单介绍

本文就bootstrapTable refresh 方法如何传递参数做简单举例说明.下面代码中,一个table,一个button,单击button会触发刷新表格操作. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../libs/bootstrap
Bootstrap Table使用整理（三）

相关阅读: Bootstrap Table使用整理(一) http://www.jb51.net/article/115789.htm Bootstrap Table使用整理(二) http://www.jb51.net/article/115791.htm Bootstrap Table使用整理(四)之工具栏 http://www.jb51.net/article/115798.htm Bootstrap Table使用整理(五)之分页组合查询 http://www.jb51.net/art
Bootstrap Table使用整理(五)之分页组合查询

推荐阅读: Bootstrap Table使用整理(一) http://www.jb51.net/article/115789.htm Bootstrap Table使用整理(二) http://www.jb51.net/article/115791.htm Bootstrap Table使用整理(三) http://www.jb51.net/article/115795.htm Bootstrap Table使用整理(四)之工具栏 http://www.jb51.net/article/1
Bootstrap Table使用整理（四）之工具栏

相关阅读: Bootstrap Table使用整理(一) http://www.jb51.net/article/115789.htm Bootstrap Table使用整理(二) http://www.jb51.net/article/115791.htm Bootstrap Table使用整理(三) http://www.jb51.net/article/115795.htm Bootstrap Table使用整理(五)之分页组合查询 http://www.jb51.net/articl
BootStrap table使用方法分析

本文实例为大家分享了BootStrap table的使用方法,供大家参考,具体内容如下 bootstrap table git address:https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/> <link rel="
Bootstrap Table使用整理(二)

相关阅读: Bootstrap Table使用整理(一) http://www.jb51.net/article/115789.htm Bootstrap Table使用整理(三) http://www.jb51.net/article/115795.htm Bootstrap Table使用整理(四)之工具栏 http://www.jb51.net/article/115798.htm Bootstrap Table使用整理(五)之分页组合查询 http://www.jb51.net/art
Bootstrap Table使用整理(一)

相关阅读: Bootstrap Table使用整理(二) http://www.jb51.net/article/115791.htm Bootstrap Table使用整理(三) http://www.jb51.net/article/115795.htm Bootstrap Table使用整理(四)之工具栏 http://www.jb51.net/article/115798.htm Bootstrap Table使用整理(五)之分页组合查询 http://www.jb51.net/ar
值得分享的Bootstrap Table使用教程

bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于HTML.CSS.JAVASCRIPT 的,具有简便灵活,快速前端开发的优势.对与bootstrap在此就不在叙述. jquery ,bootstrap ,bootstrap-table 三者之间的关系.bootstrap很多部分代码涉及到了jquery的,也就是说 bootstrap是依赖j
Bootstrap table使用方法详细介绍

bootstrap-table是一个非常好用的表格插件,提供了很多工具及分页.搜索等功能. 首先我们需要下面几个文件, <span style="font-size:18px;"> <script type="text/javascript" src="${pageContext.request.contextPath}/res/jquery-1.10.2/jquery.js&q
JS组件Bootstrap Table使用方法详解

最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机.平板.PC 设备采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案一.效果展示二.BootStrap table简单介绍 bootStra
重写hashCode()和equals()方法详细介绍

hashCode()和equals()方法可以说是Java完全面向对象的一大特色．它为我们的编程提供便利的同时也带来了很多危险．这篇文章我们就讨论一下如何正解理解和使用这2个方法．如何重写equals()方法如果你决定要重写equals()方法,那么你一定要明确这么做所带来的风险,并确保自己能写出一个健壮的equals()方法．一定要注意的一点是,在重写equals()后,一定要重写hashCode()方法．具体原因稍候再进行说明．我们先看看 JavaSE 7 Specification中
Bootstrap table使用方法汇总

bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,具有简便灵活,快速前端开发的优势.对与bootstrap在此就不在叙述.本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它. 首先交代一下,jquery ,bootstrap ,bootstrap-table 三者
Android中imageview.ScaleType使用方法详细介绍

Android中imageview.ScaleType使用方法详细介绍 ScaleType属性用以表示显示图片的方式,共有8种取值: ScaleType.CENTER:图片大小为原始大小,如果图片大小大于ImageView控件,则截取图片中间部分,若小于,则直接将图片居中显示. ScaleType.CENTER_CROP:将图片等比例缩放,让图像的短边与ImageView的边长度相同,即不能留有空白,缩放后截取中间部分进行显示. ScaleType.CENTER_INSIDE:将图片大小大于Im
Android 使用jarsigner给apk签名的方法详细介绍

Android 使用jarsigner给apk签名的方法详细介绍工作中APP功能完成以后往往需要往应用商店提交一些内容,如商店中存在本公司别的人员提交的APP,往往需要进行认领,应用商店会让开发者下载空的APK,然后使用自己APP的签名文件进行签名,认证,这里简单说一下如何使用jarsigner命令进行签名. 该arsigner命令在jdk中可以找到, 简单说明一下具体参数: -verbose:签名命令标识符. -keystore:后面跟着的是你签名使用的密钥文件(keystore)的绝对路径
fastjson 使用方法详细介绍

Fastjson介绍 Fastjson是一个Java语言编写的JSON处理器. 1.遵循http://json.org标准,为其官方网站收录的参考实现之一. 2.功能qiang打,支持JDK的各种类型,包括基本的JavaBean.Collection.Map.Date.Enum.泛型. 3.无依赖,不需要例外额外的jar,能够直接跑在JDK上. 4.开源,使用Apache License 2.0协议开源.http://code.alibabatech.com/wiki/display/FastJ
Numpy中的数组搜索中np.where方法详细介绍

numpy.where (condition[, x, y]) numpy.where() 有两种用法: 1. np.where(condition, x, y) 满足条件(condition),输出x,不满足输出y. 如果是一维数组,相当于[xv if c else yv for (c,xv,yv) in zip(condition,x,y)] >>> aa = np.arange(10) >>> np.where(aa,1,-1) array([-1, 1, 1,
java中Object类4种方法详细介绍

目录 Object(四大方法): hashCode()方法: equals()方法: getClass()方法: toString()方法: 总结 Object(四大方法): 文章干货满满,耐性看完~~何为Object?首先先来看看官方对Object的介绍:在这里附上Java官方的查阅工具:https://docs.oracle.com/en/java/javase/17/docs/api/index.html 由官方介绍可见,object属于Java.lang包内的一个类,而且提供了很多种方法
Android webview加载H5方法详细介绍

目录 1,安卓APP 怎么用webview加载H5 2,H5怎么调用安卓定义的方法 3,安卓怎么调用H5定义的方法这篇文章主要阐述3个知识点安卓APP 怎么用webview加载H5 H5怎么调用安卓定义的方法安卓怎么调用H5定义的方法 1,安卓APP 怎么用webview加载H5 安卓端定义个webview xml 页面,代码如下所示: <?xml version="1.0" encoding="utf-8"?> <WebView xmlns

Bootstrap table使用方法详细介绍

相关推荐

随机推荐