bootrap-table的使用

232 阅读1分钟
<!-- 顶部导航 -->
<div class="container">
    <div class="row">
        <table class="table"></table>
    </div>
</div>


<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>

<script src="./js/bootstrap-table-print.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-export.min.js"></script>

<script>
    $(function () {
        load();

        $(".table").on("click",".glyphicon-remove",function(){
            var id=$(this).parent().attr("data-id");
            console.log(id);
           $.ajax({
               url:"http://localhost:3000/content",
               type:"DELETE",
               data:{_id:id},
               success:function(res){
                   if(res.status===200){
                       load();
                   }
               }
           })
        })
        function load() {
            $.ajax({
                url: "http://localhost:3000/content",
                type: "GET",
                success: function (res) {
                    if (res.status == 200) {
                        console.log(res);
                        $('.table').bootstrapTable("destroy").bootstrapTable({
                            data:res.data,
                            // url:"",数据源
                            pagination:true,//启用分页
                            pageSize:1,//分页大小
                            // pageList:[5,10,20],
                            showToggle:true,
                            showPaginationSwitch:true,
                            showFullscreen:true,
                            // showRefresh:true,刷新  仅支持data数据
                            search:true,//启用查询
                            showSearchButton:true,//显示查询按钮
                            showPrint:true,
                            showExport:true,

                            //列
                            columns: [{
                                field: '_id',
                                title: 'Item ID'
                            }, {
                                field: 'title',
                                title: 'Item Name'
                            }, {
                                field: 'content',
                                title: 'Item Price'
                            },{
                                field:"top",
                                title:"是否置顶",
                                formatter:function(value,data){
                                    //value当前列的值
                                    //data当前行的数据
                                    console.log(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"
                                        }
                                    }
                                }
                            }
                        })
                    }
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }
    })

</script>