Bootstrap Table使用分享

发布时间：2020-12-17 20:57:37 所属栏目：安全来源：网络整理

导读：一、效果展示二、BootStrap table简单介绍 1 bootStrap table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化三、使用方法 1、引入js、css 1 2 3 4 5 6 7 8 !--css样式-- link href= "css/bootstrap/bootstrap

一、效果展示

二、BootStrap table简单介绍

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

三、使用方法

1、引入js、css

<link href= "css/bootstrap/bootstrap.min.css"? rel= "stylesheet" >

"css/bootstrap/bootstrap-table.css"? >

"js/bootstrap/bootstrap.min.js" ></script>

"js/bootstrap/bootstrap-table.js" ></script>

"js/bootstrap/bootstrap-table-zh-CN.js" ></script>

2、table数据填充

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

<table data-toggle= "table" >

???? <thead>

???????? ...

</thead>

</table>

$( '#table' ).bootstrapTable({

?????????? url:? 'data.json'

? });

?第二种方式交第一种而言在处理复杂数据时更为灵活，一般使用第二种方式来进行table数据填充。

         8 
       
         9 
       
         10 
       
         11 
       
         12 
       
         13 
       
         14 
       
         15 
       
         16 
       
         17 
       
         18 
       
         19 
       
         20 
       
         21 
       
         22 
       
         23 
       
         24 
       
         25 
       
         26 
       
         27 
       
         28 
       
         29 
       
         30 
       
         31 
       
         32 
       
         33 
       
         34 
       
         35 
       
         36 
       
         37 
       
         38 
       
         39 
       
         40 
       
         41 
       
         42 
       
         43 
       
         44 
       
         45 
       
         46 
       
         47 
       
         48 
       
         49 
       
         50 
       
         51 
       
         52 
       
         53 
       
         54 
       
         55 
       
         56 
       
         57 
       
         58 
       
         59 
       
         60 
       
         61 
       
         62 
       
         63 
       
         64 
       
         65 
       
         66 
       
         67 
       
         68 
       
         69 
       
         70 
       
         71 
       
         72 
       
         73 
       
         74 
       
         75 
       
         76 
       
         77 
       
         78 
       
         79 
       
         80 
       
         81 
       
         82 
       
         83 
       
         84 
       
         85 
       
         86 
       
         87 
       
         88 
       
         89 
       
         90 
       
         91 
       
         92 
       
         93 
       
         94 
       
         95 
       
         96 
       
         97 
       
         98 
       
         99 
       
         100 
       
         101 
       
         102 
       
         103 
       
         104 
       
      $(function () {

???????? //1.初始化Table

var oTable =? new? TableInit();

oTable.Init();

//2.初始化Button的点击事件

/* var oButtonInit = new ButtonInit();

oButtonInit.Init(); */

});

var TableInit = function () {

var oTableInit =? Object();

//初始化Table

oTableInit.Init = function () {

???????????? '#tradeList' ).bootstrapTable({

???????????????? '/VenderManager/TradeList' ,????????? //请求后台的URL（*）

method:? 'post' //请求方式（*）

toolbar:? '#toolbar' //工具按钮用哪个容器

striped:? true //是否显示行间隔色

cache:? false //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）

pagination:? //是否显示分页（*）

sortable:? //是否启用排序

sortOrder:? "asc" //排序方式

queryParams: oTableInit.queryParams, //传递参数（*）

sidePagination:? "server" //分页方式：client客户端分页，server服务端分页（*）

pageNumber: 1 //初始化加载第一页，默认第一页

pageSize:? 50 //每页的记录行数（*）

pageList: [ 10 25 100 ],???????? //可供选择的每页的行数（*）

strictSearch:? clickToSelect:? //是否启用点击选中行

height:? 460 //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度

uniqueId:? "id" //每一行的唯一标识，一般为主键列

cardView:? //是否显示详细视图

detailView:? //是否显示父子表

columns: [{

???????????????????? field:? 'id'

 
         title:? 
         '序号'

},{

'liushuiid' '交易编号'

'orderid'

 
         '订单号'

 
         
         'receivetime' 
         '交易时间' 
         
         
         'price' 
          
         '金额' 
        
 
         
         'coin_credit' 
         '投入硬币' 
         
         
         'bill_credit' 
          
         '投入纸币' 
        
 
         
         'changes' 
         '找零' 
         
         
         'tradetype' 
          
         '交易类型' 
        
 
         
         'goodmachineid' 
         '货机号' 
         
         
         'inneridname' 
          
         '货道号' 
        
 
         
         'goodsName' 
         '商品名称' 
         
         
         'changestatus' 
          
         '支付' 
        
 
         
         'sendstatus' 
         '出货' 
         
         
         }); 
         
         
         }; 
         
        
          ? 
         
         
         //得到查询的参数 
         
        ?????? 
         oTableInit.queryParams = function (params) { 
         
         
         var temp = {??? 
         //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 
         
        limit: params.limit,??? 
         //页面大小 
         
         
         offset: params.offset,?? 
         //页码 
         
        sdate: $( 
         "#stratTime" 
         ).val(), 
         
         
         edate: $( 
         "#endTime" 
         sellerid: $( 
         "#sellerid" 
          
         orderid: $( 
         "#orderid" 
         CardNumber: $( 
         "#CardNumber" 
          
         maxrows: params.limit, 
        
 
        pageindex:params.pageNumber, 
         
         
         portid: $( 
         "#portid" 
          
         tradetype:$( 
         'input:radio[name="tradetype"]:checked' 
         success:$( 
         'input:radio[name="success"]:checked' 
          
         }; 
        
 
        ???????????? 
         return? 
         temp; 
         
         
         }; 
         
        ???????? 
         oTableInit; 
         
         
         };

 
  
  
         12 
         
      BufferedReader bufr =?? 
         BufferedReader( 
         
         
         ???? 
         InputStreamReader(request.getInputStream(), 
         "UTF-8" 
         )); 
         
        StringBuilder sBuilder =? 
         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" ); //通过此方法获取前端数据

...

public? JsonResult GetDepartment( int? limit,? offset,string orderId,string SellerId，PortId，CardNumber，Success，maxrows，tradetype)

{

...

}

使用分页，server端返回的数据必须包括rows和total，代码如下：

...<br>gblst = SqlADO.getTradeList(sql,pageindex,maxrows);

JSONArray jsonData= JSONArray();

JSONObject jo= ;

for? ( i= 0 {

TradeBean tb = gblst.get(i);

if (tb== )

{

???????????????? continue ;

}

jo= JSONObject();

jo.put( );

"liushuiid"

 
         "price" 
         "%1.2f" 
         100.0 
         ));

"mobilephone"

 
         "receivetime" 
         "tradetype" 
          
         "changestatus" 
         )? 
         "成功" 
         : 
         "失败" 
         );

 
        "sendstatus" 
         ); 
         
         
         "bill_credit" 
         ));

???????????????????????? "changes" ));

"goodroadid" "SmsContent"

 
         "orderid" 
         "goodsName" 
          
         "inneridname" 
         "xmlstr" 
          
         ?????????????

 
        jsonData.add(jo); 
         
         
         } 
         
        TotalCount=SqlADO.getTradeRowsCount(sql); 
         
         
         JSONObject jsonObject= 
         JSONObject();

jsonObject.put( "rows" //JSONArray

"total" //总记录数

out.print(jsonObject.toString());?????? <br>...???????

...<br>oTableInit.queryParams = function (params) {

//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

//第几条记录

//显示一页多少记录

};

temp;

};<br>...

...<br> pageindex= ;

offset = ToolBox.filterInt(json1.getString( "offset" limit = ToolBox.filterInt(json1.getString( "limit" ));???

(offset != ){

pageindex = offset/limit;

}

pageindex+=? ; //第几页<br>...

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!