bootsrtap table

html

<table id="paperTable" class="table table-striped" style="100%"></table>

js

    /**
     * 列表初始化
     */
    function initPaperTable(data){
        $('#paperTable').bootstrapTable({
            data: data,
            columns: [{
                field: 'no',
                title: '序号',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                field: 'name',
                title: '名称',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'code',
                title: '编号',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'sign_count',
                title: '签名次数',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'create_time',
                title: '入库时间',
                align: 'center',
                valign: 'middle'
            },{
                field: 'operate',
                title: '操作',
                align: 'center',
                valign: 'middle',
                formatter: bookBtnGroup,    // 自定义方法，添加按钮组
                events: {
                    'click #download': function (event, value, row, index) {
                        //下载 row.url
                        window.location.href = row.url;

                    },
                    'click #del': function (event, value, row, index) {
                        //删除
                        var certificateId = row.id;
                        var delTxt = $('#state').html();
                        if(delTxt == '完成' || delTxt == '废弃'){
                            layer.msg('公正已完结,不能删除');
                        }else{
                            layer.confirm('确定删除吗？',{
                                yes: function (index, layero) {
                                    $.ajax({
                                        type: 'post',
                                        url: testPath +'/api/case/unlinkcertificate?case_id='+caseid+'&certificate_id='+certificateId,
                                        dataType: "json",
                                        contentType: "application/json",
                                        headers:{'token':token,orign:'web',Accept: "application/json; charset=utf-8"},
                                        success: function (data) {
                                            if(data.code==200 || data.code=='200'){
                                                $('#paperTable').bootstrapTable('load',[]);
                                                layer.msg(data.msg);
                                            }
                                            else{
                                                layer.msg(data.msg);
                                            }
                                            layer.close(index); //如果设定了yes回调，需进行手工关闭
                                        }
                                    })
                                },
                                btn2: function (index, layero) {
                                    layer.close(index);
                                }
                            })
                        }



                    },// 提交签名
                    'click #submitName': function (event, value, row, index) {
                        var delTxt = $('#state').html();
                        if(delTxt == '完成' || delTxt == '废弃'){
                            layer.msg('公正已完结,不能提交');
                        }else{
                            $.ajax({
                                type: 'post',
                                url: testPath +'/api/certificate/sign?case_id='+caseid+'&certificates_id='+row.id,
                                dataType: "json",
                                contentType: "application/json",
                                headers:{'token':token,orign:'web',Accept: "application/json; charset=utf-8"},
                                success: function (data) {
                                    layer.alert(data.msg);
                                },
                                error: function(data){
                                    layer.alert(data.msg);
                                }
                            })
                        }


                    }
                }
            }]
        });
        function bookBtnGroup (value, row, index) {   // 自定义方法，添加操作按钮
            if(row.url == ''){
                var html ='<button href="javascript:void(0)" disabled class="btn btn-sm btn-disabled" id="download" > 下载 </button> <a href="javascript:void(0)" class="btn btn-sm btn-outline-danger" id="del" > 删除 </a> <a href="javascript:void(0)" class="btn btn-sm btn-outline-primary" id="submitName" > 提交签名 </a>'
            }else{
                var html ='<a href="javascript:void(0)"  class="btn btn-sm btn-outline-primary" id="download" > 下载 </a> <a href="javascript:void(0)" class="btn btn-sm btn-outline-danger" id="del" > 删除 </a> <a href="javascript:void(0)" class="btn btn-sm btn-outline-primary" id="submitName" > 提交签名 </a>'

            }
            return html
        };
    }

带参数查询

/**
     * 查询公证书列表-弹框
     */
    $('#importNotarialBook').on('click','.js-secrch',function(){
        var params = {
            pageNumber:1,
            year: $.trim($('#caseYear').val()),
            code_category: $.trim($('#caseCatalog').val()),
            code_number: $.trim($('#caseCatalogNum').val())
        }
        $('#notarialBookListTable').bootstrapTable('refreshOptions',params);
    });

    /**
     * 获取公证书-弹框列表
     */
    function getCertificateList(){
        $('#notarialBookListTable').bootstrapTable({
            height: 290,
            pagination: true,
            url: testPath + '/api/certificate/list',
            sidePagination:'client',
            pageSize: 10,
            ajaxOptions:{
                dataType: "json",
                contentType: "application/json",
                headers:{'token':token,orign:'web',Accept: "application/json; charset=utf-8"}
            },
            queryParams: function queryParams(params) {
                return {
                    year: $.trim($('#caseYear').val()),
                    code_category: $.trim($('#caseCatalog').val()),
                    code_number: $.trim($('#caseCatalogNum').val())
                };
            },
            //初始化加载第1页，默认第1页
            pageNumber: 1,
            responseHandler: function (res) {
                console.log(res)
                return eval(res.data)
            },
            clickToSelect: true,
            columns: [{
                field: 'state',
                checkbox: true,
                align: 'center',
                valign: 'middle'
            },
                {
                    field: 'no',
                    title: '序号',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    field: 'code',
                    title: '证书编号',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'create_time',
                    title: '同步时间',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'name',
                    title: '名称',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'sign_count',
                    title: '签章次数',
                    align: 'center',
                    valign: 'middle'
                }]
        });
    }

详细介绍

https://blog.csdn.net/hutuyaoniexi/article/details/84948470