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，代码如下：