掌握Bootstrap Table：入门指南与实战示例

4 下载量 96 浏览量 更新于2024-08-31 收藏 303KB PDF 举报
Bootstrap Table是一种基于Bootstrap框架的表格插件，用于高效地展示数据。Bootstrap本身是由Twitter开发的，是一个流行的前端开发工具集，构建于HTML、CSS和JavaScript之上，以其简洁、灵活和快速开发的特点而闻名。Bootstrap依赖jQuery库来实现许多功能，而Bootstrap Table正是在此基础上进行扩展。 在实际项目中，要使用Bootstrap Table，首先要确保已包含了jQuery和Bootstrap的核心文件。这些文件通常包含JavaScript（如`jquery-2.2.1.js`）和CSS（例如`bootstrap.min.css`）。引入这些文件后，你就可以开始使用Bootstrap Table提供的功能，如动态加载数据、搜索、排序、分页等。 Bootstrap Table的主要优点包括其扁平化和轻量级设计，这意味着它对资源占用较少，适合处理小型到中型的数据集。它的设计使得与Bootstrap其他组件（如模态框、导航栏等）结合非常容易，提供了良好的用户体验。相比于其他表格插件，如jQuery UI或jqGrid，Bootstrap Table在交互性和与Bootstrap风格的一致性上具有优势。 在实际的HTML代码示例中，你会看到基本的结构，如`<head>`部分引入所需的脚本和样式文件。接下来，你需要创建一个表格元素，并初始化Bootstrap Table，可能涉及到设置数据源、配置选项以及添加列定义。例如： ```html <table id="myTable" data-url="data.json" class="table table-striped table-bordered bootstrap-table"> <thead> <tr> <th data-field="name">姓名</th> <th data-field="age">年龄</th> <!-- 添加更多列定义 --> </tr> </thead> </table> ``` 在这个例子中，`data-url`属性指定了数据的来源，`data-field`属性定义了每列对应的服务器数据字段。初始化时，可能会调用`bootstrapTable()`函数并传递配置参数： ```javascript $(document).ready(function() { $('#myTable').bootstrapTable({ columns: [ // 更具体的列配置 ], search: true, pagination: true, // 其他可选参数 }); }); ``` 学习Bootstrap Table，你需要熟悉JavaScript编程，特别是与jQuery的交互，同时掌握Bootstrap的基本样式和布局。理解数据绑定、事件处理和插件的工作原理也非常重要。通过阅读官方文档、实践项目和查阅在线教程，你可以逐渐掌握这个强大的表格插件。

使用bootstrap写的关于table表格的显示和折叠效果

2017-11-14 上传
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号

tableExport.js实现前端表格的导出功能(支持中文)及打印

2017-11-17 上传
该插件可以将Html的表格导出成为 JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG，PDF格式。在项目上遇到pdf导出中文乱码问题，经过一天的研究修改了一些js代码解决了pdf导出中文乱码问题，随便融入了一个html打印功能的js，有需要的可以下载来看看。

JS组件Bootstrap Table使用方法详解

2018-04-27 上传
JS组件Bootstrap Table使用方法详解 转载 2016年03月21日 15:06:09 标签： Bootstrap Table 最近客户提出需求，想将原有的管理系统，做下优化，通过手机也能很好展现，想到2个方案: a方案：保留原有的页面，新设计一套适合手机的页面，当手机访问时，进入m.zhy.com(手机页面)，pc设备访问时，进入www.zhy.com(pc页面) b方案：采用bootstrap框架,替换原有页面，自动适应手机、平板、PC 设备 采用a方案，需要设计一套界面，并且要得重新写适合页面的接口，考虑到时间及成本问题，故项目采用了b方案 一、效果展示 二、BootStrap table简单介绍 bootStrap table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化 三、使用方法 1、引入js、css [js] view plain copy <!--css样式--> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap/bootstrap-table.css" rel="stylesheet"> <!--js--> [removed][removed] [removed][removed] [removed][removed] [removed][removed] 2、table数据填充 bootStrap table获取数据有两种方式，一是通过table 的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据 [xhtml] view plain copy ... ... [xhtml] view plain copy $('#table').bootstrapTable({ url: 'data.json' }); 第二种方式交第一种而言在处理复杂数据时更为灵活，一般使用第二种方式来进行table数据填充。 [js] view plain copy $(function () { //1.初始化Table var oTable = new TableInit(); oTable.Init(); //2.初始化Button的点击事件 /* var oButtonInit = new ButtonInit(); oButtonInit.Init(); */ }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tradeList').bootstrapTable({ url: '/VenderManager/TradeList', //请求后台的URL（*） method: 'post', //请求方式（*） toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数（*） sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber:1, //初始化加载第一页，默认第一页 pageSize: 50, //每页的记录行数（*） pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） strictSearch: true, clickToSelect: true, //是否启用点击选中行 height: 460, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 uniqueId: "id", //每一行的唯一标识，一般为主键列 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [{ field: 'id', title: '序号' }, { field: 'liushuiid', title: '交易编号' }, { field: 'orderid', title: '订单号' }, { field: 'receivetime', title: '交易时间' }, { field: 'price', title: '金额' }, { field: 'coin_credit', title: '投入硬币' }, { field: 'bill_credit', title: '投入纸币' }, { field: 'changes', title: '找零' }, { field: 'tradetype', title: '交易类型' },{ field: 'goodmachineid', title: '货机号' },{ field: 'inneridname', title: '货道号' },{ field: 'goodsName', title: '商品名称' }, { field: 'changestatus', title: '支付' },{ field: 'sendstatus', title: '出货' },] }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 limit: params.limit, //页面大小 offset: params.offset, //页码 sdate: $("#stratTime").val(), edate: $("#endTime").val(), sellerid: $("#sellerid").val(), orderid: $("#orderid").val(), CardNumber: $("#CardNumber").val(), maxrows: params.limit, pageindex:params.pageNumber, portid: $("#portid").val(), CardNumber: $("#CardNumber").val(), tradetype:$('input:radio[name="tradetype"]:checked').val(), success:$('input:radio[name="success"]:checked').val(), }; return temp; }; return oTableInit; }; field字段必须与服务器端返回的字段对应才会显示出数据。 3、后台获取数据 a、servlet获取数据 [js] view plain copy BufferedReader bufr = new BufferedReader( new InputStreamReader(request.getInputStream(),"UTF-8")); StringBuilder sBuilder = new StringBuilder(""); String temp = ""; while((temp = bufr.readLine()) != null){ sBuilder.append(temp); } bufr.close(); String json = sBuilder.toString(); JSONObject json1 = JSONObject.fromObject(json); String sdate= json1.getString("sdate");//通过此方法获取前端数据 ... b、springMvc Controller里面对应的方法获取数据 [js] view plain copy public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId，PortId，CardNumber，Success，maxrows，tradetype) { ... } 4、分页(遇到问题最多的) 使用分页，server端返回的数据必须包括rows和total，代码如下： [js] view plain copy ...gblst = SqlADO.getTradeList(sql,pageindex,maxrows); JSONArray jsonData=new JSONArray(); JSONObject jo=null; for (int i=0,len=gblst.size();i<len;i++) { TradeBean tb = gblst.get(i); if(tb==null) { continue; } jo=new JSONObject(); jo.put("id", i+1); jo.put("liushuiid", tb.getLiushuiid()); jo.put("price", String.format("%1.2f",tb.getPrice()/100.0)); jo.put("mobilephone", tb.getMobilephone()); jo.put("receivetime", ToolBox.getYMDHMS(tb.getReceivetime())); jo.put("tradetype", clsConst.TRADE_TYPE_DES[tb.getTradetype()]); jo.put("changestatus", (tb.getChangestatus()!=0)?"成功":"失败"); jo.put("sendstatus", (tb.getSendstatus()!=0)?"成功":"失败"); jo.put("bill_credit", String.format("%1.2f",tb.getBill_credit()/100.0)); jo.put("changes",String.format("%1.2f",tb.getChanges()/100.0)); jo.put("goodroadid", tb.getGoodroadid()); jo.put("SmsContent", tb.getSmsContent()); jo.put("orderid", tb.getOrderid()); jo.put("goodsName", tb.getGoodsName()); jo.put("inneridname", tb.getInneridname()); jo.put("xmlstr", tb.getXmlstr()); jsonData.add(jo); } int TotalCount=SqlADO.getTradeRowsCount(sql); JSONObject jsonObject=new JSONObject(); jsonObject.put("rows", jsonData);//JSONArray jsonObject.put("total",TotalCount);//总记录数 out.print(jsonObject.toString()); ... 5、分页界面内容介绍 前端获取分页数据，代码如下： [js] view plain copy ...oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 limit: params.limit, //第几条记录 offset: params.offset, //显示一页多少记录 sdate: $("#stratTime").val(), }; return temp; };... 后端获取分页数据,代码如下： [js] view plain copy ...int pageindex=0; int offset = ToolBox.filterInt(json1.getString("offset")); int limit = ToolBox.filterInt(json1.getString("limit")); if(offset !=0){ pageindex = offset/limit; } pageindex+= 1;//第几页... 以上就是为大家分享的Bootstrap Table使用方法，希望对大家熟练掌握Bootstrap Table使用方法有所帮助。 转自：http://www.jb51.net/article/79033.htm

Bootstrap table使用方法汇总

2020-11-29 上传
Bootstrap表格（Bootstrap table）是一种基于HTML、CSS和JavaScript的开源前端组件，主要用于创建...通过理解其基本概念、依赖关系和使用方法，开发者能够轻松地在网页中集成和定制表格，提升项目的交互性和用户体验。

bootstrap table表格使用方法详解

2020-08-30 上传
在本例中，我们使用 `$("#myTable").bootstrapTable({ options })` 来设置表格的属性和行为。以下是一些常见的选项： - `url`: 指定获取数据的 URL，通常返回 JSON 格式的数据。 - `method`: 数据请求的 HTTP 方法...

bootstraptable 手册_bootstrap table表格使用方法详解

2023-06-01 上传
以下是Bootstrap Table的使用方法： 1. 引入必要的文件 在使用Bootstrap Table前，需要引入以下文件： ```html <!-- bootstrap样式文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-...

JS表格组件神器bootstrap table使用指南详解

2020-10-20 上传
为了实现服务器模式，需要在JavaScript中处理AJAX请求，例如使用jQuery的`$.ajax`，将返回的JSON数据传给Bootstrap Table的`load`方法。 此外，Bootstrap Table还支持自定义事件和方法，以及各种扩展功能，如列筛选...

BootstrapTable refresh 方法使用实例简单介绍

2005-02-06 上传
在 BootstrapTable 中，`refresh` 方法接受一个可选的参数对象，这个对象可以包含多个配置选项以定制刷新行为。在提供的示例中，我们看到了以下关键配置： 1. **url**: 这是用于获取新数据的服务器端 API 的 URL。...

Bootstrap表格使用方法详解

2021-01-21 上传
下表列出了 Bootstrap 支持的一些表格元素： 表格类： .table：为任意 <table> 添加基本样式 (只有横向分隔线) .table-striped：在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) .table-bordered：为所有表格的...

bootstrap table表格插件使用详解

2021-01-19 上传
$table.bootstrapTable({ url: '../data/data1.json', striped: true, minimumCountColumns: 2, clickToSelect: true, detailView: true, detailFormatter: 'detailFormatter', pagination: true, ...
weixin_38688097
  • 粉丝: 5
  • 资源: 928
上传资源 快速赚钱

最新资源