最近客户提出需求，想优化原有的管理系统，可以很好的用手机展示，想出了两个方案，

方案a:保留原有页面，设计一套新的适合手机的页面。手机访问时，进入www.zhy.com(手机页面)，pc设备访问时，进入www.zhy.com(pc页面)。

方案B:采用bootstrap框架替代原有页面，自动适配手机、平板、PC设备。

方案A需要设计一套接口，重写适合页面的接口。考虑到时间和成本，本项目采用方案B.

一、效果展示。

第二，简单介绍BootStrap表。

BootStrap table是一个轻量级的表格插件，它使用AJAX来获取JSON格式的数据。它的分页和数据填充方便，支持国际化。

1.介绍js和css。

！- css样式-link href=' CSS/bootstrap/bootstrap . min . CSS ' rel='样式表' link href=' CSS/bootstrap/bootstrap-table . CSS ' rel='样式表'！-js-Script src=' http : js/bootstrap/jquery-1 . 12 . 0 . min . js ' type=' text/JavaScript '/Script Script src=' http : js/bootstrap/bootstrap . min . js '/Script src=' http : js/bootstrap/bootstrap-table-zh-cn . js '/Script 2，table

bootStrap表获取数据有两种方式，一种是通过表的data-url属性指定数据源，另一种是在JavaScript初始化表获取数据时指定url。

表格数据-切换=“表格”和./标题/表格.

$('#table ')。bootstrapTable({ URL : ' data . JSON ' })；与第一种方法相比，第二种方法在处理复杂数据时更加灵活，第二种方法一般用于表格数据填充。

$(function () { //1 .初始化table var oTable=new TableInit()；可旋转的.init()；//2.初始化纽扣的点击事件/* var oButtonInit=new ButtonInit()；oButtonInit .init()；*/});var TableInit=function(){ var oTableInit=new Object()；//初始化表oTableInit .Init=function () { $('#tradeList ').bootstrapTable({ URL : '/Vendermanager/TradeList '，//请求后台的URL(*) method: 'post '，//请求方式(*) toolbar: '#toolbar '，//工具按钮用哪个容器striped: true，//是否显示行间隔色cache: false，//是否使用缓存，默认为没错，所以一般情况下需要设置一下这个属性(*)分页： true，//是否显示分页(*) sortable: false，//是否启用排序sortOrder: 'asc '，//排序方式查询参数3360 otableinit。查询参数，//传递参数(*)侧分页："服务器",//分页方式：客户端客户端分页服务器服务端分页(*)页码：1,//初始化加载第一页，默认第一页pageSize: 50，//每页的记录行数(*)页面列表： [10,25,50,100],//可供选择的每页的行数(*)严格搜索：为真，单击选择：为真，//是否启用点击选中行高度： 460,//行高，如果没有设置高度属性，表格自动根据记录条数觉得表格高度uniqueId: 'id '，//每一行的唯一标识，一般为主键列cardView: false，//是否显示详细视图detailView: false，//是否显示父子表列： [{ field: 'id '，title: '序号}，{ field: ' liushuiid '，title: '交易编号}，{ field: 'orderid '，title: '订单号}，{ field: 'receivetime '，标题： '交易时间}，{ 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。查询参数=函数(参数){ var temp={//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的limit: params.limit，//页面大小offset: params.offset，//页码sdate: $('#stratTime ').val()，edate: $('#endTime ').val()，sellerid: $('#sellerid ').val()，orderid: $('#orderid ').val()，卡号： $(' #卡号').val()，maxrows: params.limit，页面索引： params。页码，portid: $('#portid ').val()，卡号： $(' #卡号').val()，交易类型： $('输入3360单选[name=' trade type ']:选中').val()，成功： $('输入：单选[name=' success ']:勾选').val()，}；返回温度；};返回oTableInit }；领域字段必须与服务器端返回的字段对应才会显示出数据。

3、后台获取数据

小型应用程序获取数据

BufferedReader bufr=new BufferedReader(new InputStreamReader(请求。getinputstream()，' UTF-8 ')；StringBuilder sBuilder=new StringBuilder(' ')；字符串温度=' ';while((temp=bufr.readLine())！=null){ sbuilder。追加(临时)；} bufr。close()；字符串JSON=sbuilder。ToString()；JSON对象JSON 1=JSON对象。from object(JSON)；字符串sdate=JSON 1。getStrIng(' sdate ')；//通过此方法获取前端数据.弹簧手动音量调节控制器里面对应的方法获取数据

public JsonResult GetDepartment(int limit，int offset，string orderId，string SellerId，PortId，CardNumber，Success，maxrows，trade type){ 0.}4、分页（遇到问题最多的)使用分页服务器端返回的数据必须包括行和总计，代码如下：

.brgblst=SqLaDo。GetRadeList(SqL，pageindex，最大行数)；JSON数组JSON数据=新的JSON数组()；JSONObject jo=nullfor (int i=0，len=gblst。size()；伊琳；I){ TradeBean TB=gbl ST . get(I)；if(TB==null){ continue；} jo=new JSonobject()；jo.put('id '，I ^ 1)；乔。放(' liusuid '，TB。getliuzuid())；jo.put('price '，String.format('%1.2f '，TB)。getprice()/100.0))；jo.put('mobilephone '，TB。getmobile phone())；jo.put('receivetime '，工具箱。getymdhms(TB。get receive time()))；jo.put('tradetype '，clsConst .TRADE _ TYPE _ DES[TB。GetRadeTYPE()])；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。getgood road id())；jo.put('SmsContent '，TB。getsmscontent())；jo.put('orderid '，TB。getorderid())；jo.put('goodsName '，TB。getgoodsname())；jo . put(' inner name '，TB。getinneridname())；jo.put('xmlstr '，TB。getxmlstr())；jsondata。add(jo)；} int TotalCount=SqLado。GetRadeRowsCount(SQL)；JSON对象JSON对象=新的JSON对象()；JSON对象。put(' row '，JSON数据)；//JSON数组JSON对象。put(' total '，总计数)；//总记录数出去。print(JSonobject。ToString())；英国铁路公司.5、分页界面内容介绍

前端获取分页数据，代码如下：

.brotableinit。query params=function(params){ var temp={//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的limit: params.limit，//第几条记录offset: params.offset，//显示一页多少记录sdate: $('#stratTime ').val()，}；返回温度；};英国铁路公司.后端获取分页数据，代码如下：

.brint页面索引=0；int offset=ToolBox。过滤器int(JSON 1。getString(' offset ')；int limit=ToolBox。过滤器int(JSON 1。getString(' limit ')；如果(偏移量！=0){页面索引=偏移量/限制；}页面索引=1；//第几页英国铁路公司.如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

引导程序学习教程

引导程序实战教程

引导表使用教程

引导程序插件使用教程

以上就是为大家分享的引导表使用方法，希望对大家熟练掌握引导表使用方法有所帮助。