bootstrap-content

                            pagination: true            启用分页

pageSize: 1 分页大小 pageList:[1,2,3] 分页大小 自定义 showToggle:true 列表视图/表格视图 切换 showPaginationSwitch:true 分页开关 是否启用分页 showFullscreen:true 全屏显示 showRefresh:true 刷新 仅支持url数据源 search:true 启用查询 showSearchButton:true 显示查询按钮 输入框+按钮 showPrint:true 打印 showExport:true 导出

    <!--顶部导航-->

    <div class="container">
        <div class="row">
            <table class="table">

            </table>
        </div>
    </div>


    <script src="./js/jquery.min.js"></script>
    <script src="./js/tableExport.min.js"></script>
    <script src="./js/jspdf.min.js"></script>
    <script src="./js/jspdf.plugin.autotable.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootstrap-table.min.js"></script>
    <script src="./js/bootstrap-table-print.min.js"></script>
    <script src="./js/bootstrap-table-export.min.js"></script>
    <script>
          $(function (){
            load();

            $(".table").on("click",".glyphicon-remove",function(){
                var id = $(this).parent().attr("data-id");
                $.ajax({
                    url: "http://localhost:3007/content",
                    type: "DELETE",
                    data:{_id:id},
                    success:function(res){
                        if(res.status === 200){
                            load();
                        }
                    }
                })
            })

            function load() {
                $.ajax({
                    url: "http://localhost:3007/content",
                    type: "GET",
                    success: function (res) {
                        if (res.status === 200) {
                            $(".table").bootstrapTable('destroy').bootstrapTable({
                                data: res.data,
                                // url:"",//请求地址  数据源
                                pagination: true,//启用分页
                                // pageSize: 1, //分页大小
                                pageList:[1,2,3],// 分页大小   自定义

                                showToggle:true,//列表视图/表格视图  切换
                                showPaginationSwitch:true,//分页开关  是否启用分页
                                showFullscreen:true,//全屏显示
                                // showRefresh:true,//刷新   仅支持url数据源
                                search:true,//启用查询
                                showSearchButton:true,//显示查询按钮   输入框+按钮

                                showPrint:true,//打印

                                showExport:true,//导出


                                columns: [{//配置列
                                    field: '_id',
                                    title: '编号'
                                }, {
                                    field: 'title',
                                    title: '标题'
                                }, {
                                    field: 'content',
                                    title: '内容'
                                }, {
                                    field: 'top',
                                    title: '是否置顶',
                                    formatter:function(value, data){//格式转换
                                        //value 当前列的值
                                        //data 当前行的数据
                                        return value?"是":"否";
                                    }
                                },{
                                    title:"操作",
                                    formatter:function(value, data){
                                        return ` <a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-edit text-primary"></span></a>
                                                 <a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-remove text-danger"></span></a>`;
                                    }
                                }
                                ],

                               //自定义按钮集合
                                buttons: function () {
                                    return {
                                        btnAdd: {//添加
                                            icon: 'glyphicon glyphicon-plus',
                                            event: function () {
                                                alert('添加')
                                            },
                                            attributes: {
                                                title: "add"
                                            }
                                        },
                                        btnDel: {//删除
                                            icon: 'glyphicon glyphicon-remove',
                                            event: function () {
                                                alert('删除')
                                            },
                                            attributes: {
                                                title: "remove"
                                            }
                                        }
                                    }
                                }
                            })
                        }
                    }
                })
            }
        })



        
    </script>