bootstrap table使用实例

第一步：

<!--css样式-->

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

<link href= "css/bootstrap/bootstrap-table.css"  rel= "stylesheet" >

<!--js-->

<script src= "js/bootstrap/jquery-1.12.0.min.js"  type= "text/javascript" ></script>

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

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

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

第二步：数据填充

$(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;

     };

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