Bootstrap table + Layer

• 静态文件的引用

    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.js"></script>

• 关于后台返回的数据格式

如果设置后台分页： sidePagination: "server", 则后台返回数据必须包含 total 和 rows：
如果设置前台分页： sidePagination: "client", 只必须要有rows。

{total:2,rows:[{'typeId':1,'typeCode':'haha1','typeDesc':'haha1'},{'typeId':1,'typeCode':'haha2','typeDesc':'haha2'}]}

• 关于表格数据重新加载

必须先销毁才可再次初始化

$('#quoteReport_table').bootstrapTable('destroy');  

    // 1、定义一个表格容器

    <table id="ArbetTable"> </table>

    <script>

        // 3、初始化表格
        $(function() {
            var oTable = new TableInit();
            oTable.Init();
        });

        // 2、定义表格格式
        var TableInit = function() {
            var oTableInit = new Object();
            oTableInit.Init = function() {
                $('#ArbetTable').bootstrapTable({
                    url : 'showTable',
                    method : 'post',
                    //toolbar: '#toolbar',
                    striped : true,
                    cache : false,
                    pagination : true,
                    sortable : false,
                    queryParams : oTableInit.queryParams,
                    showToggle : true,
                    sidePagination : "server",
                    pageList : [ 4, 10 ],
                    pageNumber : 1,
                    pageSize : 4,
                    showColunms : true,
                    clickToSelect : true,
                    showRefresh : true,
                    search : false,
                    uniqueId : "id",
                    contentType : "application/x-www-form-urlencoded",
                    columns : [ {
                        field : 'id',
                        title : '学号'
                    }, {
                        field : 'name',
                        title : '姓名'
                    }, {
                        field : 'sex',
                        title : '性别'
                    }, {
                        field : 'age',
                        title : '年龄'
                    }, {
                        field : 'operate',
                        title : '操作',
                        events : operateEvents,
                        formatter : operateFormatter
                    } ]
                });
            };
            oTableInit.queryParams = function(params) {
                var temp = {
                    limit : params.limit,
                    offset : params.offset
                };
                return temp;
            };
            return oTableInit;
        };

        function operateFormatter(value, row, index) {
            return [ '<button class="btn btn-warning" id="edit">编辑</button>',
                '<button class="btn btn-danger" id="delete">删除</button>' ]
                .join(" ");
        }

        window.operateEvents = {
            "click #delete" : function(e, value, row, index) {
                layer.msg("确认删除?", {
                    time : 0,
                    icon : 7,
                    btn : [ "是", "否" ],
                    yes : function(index) {
                        layer.close(index);
                        $.ajax({
                            type : "POST",
                            url : "deleteStudent",
                            data : "id=" + row["id"],
                            contentType : "application/x-www-form-urlencoded",
                            async : false,
                            success : function(result) {
                                location.reload();
                            },
                            error : function(result) {
                                layer.alert('删除失败', {
                                    icon : 5
                                });
                            }
                        });

                    }
                });
            },

            "click #edit" : function(e, value, row, index) {
                layer.open({
                    type : 1,
                    area : [ '600px', '360px' ],
                    shadeClose : true, //点击遮罩关闭
                    title : '修改学生记录',
                    content : $('#bidderDiv')
                });

                $("#id").val(row["id"]);
                $("#name").val(row["name"]);
                $("#sex").val(row["sex"]);
                $("#age").val(row["age"]);

                $("#dilivery").off("click").on("click", function() {
                    var record = {
                        oldid : row["id"],
                        id : $('#id').val(),
                        name : $('#name').val(),
                        sex : $('#sex').val(),
                        age : $('#age').val()
                    }
                    //Ajax调用处理
                    $.ajax({
                        type : "POST",
                        url : "updateStudent",
                        datatype : "text",
                        contentType : "application/json",
                        data : JSON.stringify(record),
                        async : true,
                        success : function(result) {
                            layer.alert('修改成功', {
                                icon : 6
                            });
                        },
                        error : function(result) {
                            layer.alert('修改失败', {
                                icon : 5
                            });
                        }
                    })
                });
            }
        }
  
    </script>