bootstrap-table使用笔记

服务端分页：

//html
<div class="container-fluid">
    <div style="margin-top:1em"></div>
    <form action="${basePath}admin/wp/wpDayOrderReceivable.xhtml" class="form-inline"  role="form" method="post">
        <input type="hidden" name="isXls" id="isXls" />
        <div class="form-group">
            <label for="startTimeSearch" class="control-label">日期</label>
            <div class="input-group date form_date">
                <input class="form-control" id="startTime" name="startTime" type="text" value='$!DateUtil.format($!command.startTime,"yyyy-MM-dd")' onfocus="WdatePicker({minDate:'2014-12-01',maxDate:'$!command.endTime'})">
            </div>
        </div>
        <div class="form-group">
            <label for="endTimeSearch" class="control-label">-</label>
            <div class="input-group date form_date" >
                <input class="form-control" id="endTime" name="endTime" type="text" value='$!DateUtil.format($!command.endTime,"yyyy-MM-dd")' onfocus="WdatePicker()">
            </div>
        </div>
        <div class="form-group">
            <label for="payName" class="control-label">支付渠道</label>
            <select id="payName" name="payName" class="form-control" onchange="Changed(this.value)">
                $!{DisplayUtil.getWeipiaoDisplay($!{command.merchantNo})}
            </select>
        </div>
        <div class="form-group">
            <label for="merchantNo" class="control-label">商户号</label>
            <select id="merchantNo" name="merchantNo" class="form-control">
            </select>
            <button type="button" onclick="javascript:refreshTable()" class="btn btn-default">查询</button>
        </div>
        <div class="form-group">
            <button type="button" onclick="javascript:downloadxls()" class="btn btn-default">导出xls</button>
        </div>
    </form>
    <br>
    <table id="table" class="table table-hover table-bordered">
    </table>
</div>

//js
$(function () {
        Changed('$!command.merchantNo');
        $('#table').bootstrapTable({
            url:"${basePath}admin/wp/wpDayOrderReceivable.xhtml",
            method: 'get',
            pagination: true,
            sidePagination: "server",
            pageSize: 10,
            queryParams:getParams,
            columns:[{
                title: '交易时间',
                field: 'transactiondate',
                formatter: dateFormater
            },{
                title: 'ID',
                field: 'id',
                visible:false
            },{
                title: '支付渠道',
                field: 'merchantName'
            },{
                title: '商户号',
                field: 'merchantNo'
            },{
                title: '交易金额',
                field: 'successAmount',
                formatter: valueFormater
            },{
                title: '退款金额',
                field: 'refundAmount',
                formatter: valueFormater
            },{
                title: '应收金额',
                field: 'yingshou',
                formatter: valueFormater
            },{
                title: '详情',
                formatter: operateFormatter
            }]
        })
    });

    function operateFormatter(value, row, index){
        if(row.id){
            var a='<a href="${basePath}admin/wp/wpOrderReceivableDetail.xhtml?id='+row.id+"&startTime="+row.transactiondate+"&merchantNo="+row.merchantNo+'" class="btn btn-default" role="button">详情</a>';
            return a;
        }
    }
    function fmoney(s, n) {
        s = (s/100).toFixed(n) + "";
        var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1];
        t = "";
        for (i = 0; i < l.length; i++) {
            t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
        }
        return t.split("").reverse().join("") + "." + r;
    }
    function valueFormater(value, row, index){
        var v=fmoney(value,2);
        return v;
    }
    function dateFormater(value, row, index) {
        if(value){
            return value.substr(0,10)
        }
    }
    function getParams(params){
        params.startTime=$('#startTime').val();
        params.endTime=$('#endTime').val();
        params.merchantNo=$('#merchantNo').val();
        return params;
    }
    function refreshTable() {
        table.bootstrapTable('refresh');
    }

  后台逻辑代码：

     返回格式：json  {total:23,rows[{...},{...}]}

    

 @RequestMapping("/admin/wp/wpDayOrderReceivable.xhtml")
    public String getDayWeiPiaoOrderReceivable(CarDistributorCommand command, ModelMap model,HttpServletResponse response){
        if(StringUtils.isBlank(command.getMerchantNo())){
            return showJsonError(model,"merchantNo not null");
        }
        Integer count=weipiaoIncomeDetailService.getWeipiaoOrderReceivableCount(command);
        List<WeipiaoOrderReceivable> lists=weipiaoIncomeDetailService.getWeipiaoOrderReceivable(command);
        if (StringUtils.isNotBlank(command.getIsXls())) {
            model.put("list",lists);
            download("xls", response);
            return "/weipiao/wporderReceivableXls.vm";
        }
        for(WeipiaoOrderReceivable wp:lists){
            wp.setMerchantName(WeiPiaoCate.getWeipiao(wp.getMerchantNo()));
        }
        List<WeipiaoOrderReceivable> sums=weipiaoIncomeDetailService.getWeipiaoOrderReceivableMonth(command);
        WeipiaoOrderReceivable w=sums.get(0);
        w.setMerchantName(null);
        w.setTransactiondate(null);
        w.setMerchantNo("合计");
        lists.add(w);

        Map<String,Object> map= Maps.newHashMap();
        map.put("total",count);
        map.put("rows",lists);
        String resultJson = JsonUtils.writeObjectToJson(map);
        return showDirectJson(model,resultJson);
    }

 前台分页：

//html
<div class="container-fluid">
    <div style="margin-top:1em"></div>
    <form action="${basePath}admin/wp/wpOrderReceivableMonth.xhtml" class="form-inline"  role="form" method="post">
        <div class="form-group">
            <label for="startTimeSearch" class="control-label">日期</label>
            <div class="input-group date form_date">
                <input class="form-control" name="startTime" type="text" value='$!DateUtil.format($!command.startTime,"yyyy-MM")' onclick="WdatePicker({dateFmt:'yyyy-MM'})">
            </div>
            <button type="button" onclick="javascript:document.forms[0].submit()" class="btn btn-default">查询</button>
        </div>
    </form>
    <table id="table" class="table table-hover table-bordered"  data-show-columns="true"
           data-side-pagination="client"
           data-pagination="true"
           data-page-size="10">
        <thead>
        <tr>
            <th data-field="date" data-sortable="true">期间</th>
            <th data-field="mname" data-sortable="true">支付渠道</th>
            <th data-field="mcode" data-sortable="true">商户号</th>
            <th data-field="jiaoyi" data-sortable="true">交易金额</th>
            <th data-field="tuikuan" data-sortable="true">退款金额</th>
            <th data-field="yingshou" data-sortable="true">应收金额</th>
            <th data-field="detail" data-sortable="true">详情</th>
        </tr>
        </thead>
    </table>
</div>
//js
var table = $('#table');
    $(function () {
        var data = [
            #set($a2=0)
            #set($a3=0)
            #set($a4=0)
            #set($a5=0)
            #set($a6=0)
            #foreach($re in ${list})
                {
                    "date": "$!DateUtil.format($!re.transactiondate,'yyyy-MM')",
                    "mname":"$!re.merchantName",
                    "mcode":"$!re.merchantNo",
                    #set($a2=$a2 + $!re.successAmount)
                    "jiaoyi": "$!VmUtils.formatPercent($!re.successAmount, 100, '###,##0.00')",
                    #set($a3=$a3 + $!re.refundAmount)
                    "tuikuan": "$!VmUtils.formatPercent($!re.refundAmount, 100, '###,##0.00')",
                    #set($a6=$a6 + $!re.yingshou)
                    "yingshou": "$!VmUtils.formatPercent($!re.yingshou, 100, '###,##0.00')",
                    "detail":'<a href="${basePath}admin/wp/wpOrderReceivable.xhtml?merchantNo=$!re.merchantNo&startTime=$!re.transactiondate" class="btn btn-default" role="button">详情</a>'
                }
                ,
            #end
            {"date":"合计","mname":"","mcode":"","jiaoyi":"$!VmUtils.formatPercent($!a2, 100, '###,##0.00')","tuikuan":"$!VmUtils.formatPercent($!a3, 100, '###,##0.00')","yingshou":"$!VmUtils.formatPercent($!a6, 100, '###,##0.00')"}
        ];
        table.bootstrapTable({data : data});
    });

   后台直接绑定数据：

  

@RequestMapping("/admin/wp/wpOrderReceivableMonth.xhtml")
    public String getMonthWeiPiaoOrderReceivable(CarDistributorCommand command, ModelMap model){
        if(command.getStartTime()==null){
            command.setStartTime(DateUtil.getMonthFirstDay(DateUtil.getCurFullTimestamp()));
        }
        if(command.getEndTime()==null){
            command.setEndTime(DateUtil.getNextMonthFirstDay(DateUtil.getCurFullTimestamp()));
        }
        List<WeipiaoOrderReceivable> wos=weipiaoIncomeDetailService.getWeipiaoOrderReceivableMonth(command);
        model.put("command",command);
        model.put("list",wos);
        return "/weipiao/wporderReceivableMonth.vm";
    }