实现增删改查

        </table>
    </div>
</div>
<!-- <a href="#"><span class="glyphicon glyphicon-edit text-primary"></span></a>
<a href="#"><span class="glyphicon glyphicon-remove text-danger"></span></a> -->


<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.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-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:3001/content",
                type: "DELETE",
                data: { _id: id },
                success: function (res) {
                    if (res.status === 200) {
                        load();
                    }
                }
            })

        })



        function load() {
            $.ajax({
                url: "http://localhost:3001/content",
                type: "GET",
                success: function (res) {
                    if (res.status === 200) {
                        $('.table').bootstrapTable('destroy').bootstrapTable({//.table是跟<table class="table"></table>有联系
                            data: res.data,
                            //url:"",数据源

                            pagination: true, //启用分页
                            pageSize: 1, //分页大小
                            // pageList:[5,10,20],

                            showToggle: true,//列表视图/表格试图
                            showPaginationSwitch: true,//分页开关
                            showFullscreen: true,//全屏显示
                            //showRefresh:true,//刷新  ，仅支持url数据源

                            search: true,//启用查询
                            showSearchButton: true,//显示查询按钮

                            showPrint: true,//显示打印按钮

                            showExport: true,//显示导出按钮


                            columns: [{ //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>