Bootstrap Table案例 | Bootstrap Table Demo

项目场景：

JQuery版本为：3.6.0

Bootstrap版本为：3.4.1

Bootstrap-Table版本为：1.8.1

Bootstrap-Table-Edit版本为：1.0

Bootstrap-Select版本为：1.0

Bootstrap-DateTimePicker版本为：2.0

下载地址：Js文件下载地址

---

案例：

<style type="text/css">
    #TableData button{ margin: 0 5px;}
</style>
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <div id="toolbar" class="btn-group">
            <button id="MainAdd" class="btn btn-success">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
        </div>
        <div class="databox">
            <table id="TableData" class="table table-hover"></table>
        </div>
    </div>
    <div class="col-md-1"></div>
</div>
<script type="text/javascript">
    $(function(){
        $('#TableData').bootstrapTable({
            //请求方式
            method: 'Get',
            //显示工具栏
            toolbar: '#toolbar',
            //显示搜索
            search: true,
            //显示刷新
            showRefresh: true,
            //指定主键列
            idFieId: 'Project_Id',
            //唯一标识
            uniqueId: "Project_Id",
            //启用单选
            singleSelect: true,
            //点击行选中
            clickToSelect: true,
            //开启编辑模式
            editable: true,
            //显示分页
            pagination: true,
            //设置客户端分页
            sidePagination: 'Client',
            //分页显示条数
            pageSize: 10,
            //分页选项
            pageList: [10, 30, 50],
            //加载数据源
            data:[
                {"Project_Id":1,"Project_Name":"美容","Project_Price":100.00,"Project_Money":80.00,"Project_Check":false},
                {"Project_Id":2,"Project_Name":"美发","Project_Price":50.00,"Project_Money":30.00,"Project_Check":false},
                {"Project_Id":3,"Project_Name":"刘海","Project_Price":30.00,"Project_Money":20.00,"Project_Check":false},
                {"Project_Id":1,"Project_Name":"美容","Project_Price":100.00,"Project_Money":80.00,"Project_Check":false},
                {"Project_Id":2,"Project_Name":"美发","Project_Price":50.00,"Project_Money":30.00,"Project_Check":false},
                {"Project_Id":6,"Project_Name":"刘海","Project_Price":30.00,"Project_Money":20.00,"Project_Check":false},
                {"Project_Id":7,"Project_Name":"美容","Project_Price":100.00,"Project_Money":80.00,"Project_Check":false},
                {"Project_Id":8,"Project_Name":"美发","Project_Price":50.00,"Project_Money":30.00,"Project_Check":false},
                {"Project_Id":9,"Project_Name":"刘海","Project_Price":30.00,"Project_Money":20.00,"Project_Check":false},
                {"Project_Id":10,"Project_Name":"美容","Project_Price":100.00,"Project_Money":80.00,"Project_Check":false}
            ],
            //列数据
            columns: [
                { checkbox: true },
                { field: "Project_Id", title: "#" },
                { field: "Project_Name", title: "产品名称" },
                { field: "Project_Price", title: "产品进价" },
                { field: "Project_Money", title: "产品售价" },
                { field: "Project_Check", title: "产品状态", formatter: function (value, row, index) { return value == 1 ? "可用" : "禁用"; },
                { field: "Operation", title: "操作", width:"180px", formatter: function (value, row, index) {
                        var result = "";
                        result += "<button id='' class='btn btn-sm btn-info' title='修改'><span class='glyphicon glyphicon-pencil'><span></button>";
                        result += "<button id='' class='btn btn-sm btn-danger' title='删除'><span class='glyphicon glyphicon-remove'><span></button>";
                        return result;
                    }
                }
            ]
        });
    });
</script>