bootstraptable表格相关总结

bootstraptable能帮我们很快创建展示数据的表格

function tableInit(){
        $table.bootstrapTable({
            url: '/api/payOrder',//请求后台的URL
            height: getHeight(),
            striped: true,//设置为 true 会有隔行变色效果
            search: true,//搜索框
            searchOnEnterKey: true,//输入后回车确认搜索
            showRefresh: true,//显示刷新按钮
            showToggle: true,//是否显示 切换试图（table/card）按钮
            showColumns: true,//显示列
            minimumCountColumns: 2,//当列数小于此值时，将隐藏内容列下拉框。
//            showPaginationSwitch: true,//是否显示 数据条数选择框
            clickToSelect: true,//设置true 将在点击行时，自动选择rediobox 和 checkbox
            pageSize: 1,//如果设置了分页，页面数据条数
            pageList: [10, 20, 25, 50, 100],//如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
//            detailView: true,//设置为 true 可以显示详细页面模式。
//            detailFormatter: 'detailFormatter',//格式化详细页面模式的视图。
            pagination: true,//设置为 true 会在表格底部显示分页条
            paginationLoop: false,//设置为 true 启用分页条无限循环的功能。
            classes: 'table table-hover table-no-bordered',//表格的类名称。默认情况下，表格是有边框的，你可以添加 ‘table-no-bordered’ 来删除表格的边框样式。
            sidePagination: "server",//设置在哪里进行分页，可选值为 ‘client’ 或者 ‘server’。设置 ‘server’时，必须设置 服务器数据地址（url）或者重写ajax方法
            silentSort: false,//设置为 false 将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效.
            smartDisplay: false,//设置为 true可以在分页和卡片视图快速切换
            idField: 'id',//指定主键列
            sortName: 'id',//排序名称
            sortOrder: 'asc',//排序顺序
            escape: true,//转义HTML字符串，替换 &, <, >, ", `, 和 ' 字符.
            maintainSelected: true,//设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
            toolbar: '#toolbar',//一个jQuery 选择器，指明自定义的toolbar 例如:
#toolbar, .toolbar. 
            columns: [//列配置项,详情请查看 列参数 表格
                {field: 'payNum', title: '交易单号', sortable: true, align: 'center'},
                {field: 'orderNum', title: '订单编号', sortable: true, align: 'center'},
                {field: 'payment', title: '支付方式', formatter: 'paymentFormatter', sortable: true, align: 'center'},
                {field: 'dealType', title: '交易类型', formatter: 'dealTypeFormatter', sortable: true, align: 'center'},
                {field: 'amount', title: '交易金额', formatter: 'amountFormatter', sortable: true, align: 'center'},
                {field: 'status', title: '交易状态', formatter: 'payStatusFormatter', sortable: true, align: 'center'},
                {
                    field: 'action',
                    title: '操作',
                    align: 'center',
                    class: 'pay-detail',
                    formatter: detailFormatter
                }
            ],
            queryParams: queryParams,//请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数
            responseHandler: function (data) {//加载服务器数据之前的处理程序，可以用来格式化数据。
                if (data.status == "SUCCESS") {
                    data = data.content;
                    return {total: data.totalElements, rows: data.content};
                } else {
                    $.confirm({
                        type: 'red',
                        title: false,
                        content: '请求数据失败',
                        autoClose: 'cancel|3000',
                        backgroundDismiss: true,
                        buttons: {
                            confirm: {
                                text: '确定',
                                btnClass: 'waves-effect waves-button'
                            }
                        }
                    });
                    return {total: 0, rows: []};
                }
            }
        });
    }

页面初始化后加载bootstraptable

$(function () {
        //加载时间选择插件
        init();
        jconfirm.defaults = {
            theme: 'material',
        };
        // bootstrap table初始化
        // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
        tableInit();

        //加载交易状态下拉数据
        var control = $("#sel_payStatus");
        getStatus(function(data){
            data.content.forEach(function(status){
                control.append("<option value='" + status.id + "'>&nbsp;" + status.text + "</option>")
            })
        })
        function getStatus(fc){
            iGet("/api/payOrder/status",fc);
        }
        //当进行条件查询时，表格需重新刷新
        $("#btn_query").click(function () {
            $table.bootstrapTable('refresh');
        })

    });