bootstrapTable 动态显示table

bootstrapTable 动态显示table

引入bootstrapTable文件

先添加一个表格

JQ方法里写以下代码 导出需引用JS

 $('#ArbetTable').bootstrapTable({        //.bootstrapTable('destroy')
            url: "/Shops/GetUsersWithPage",     //请求后台的URL（*）
            //method: 'GET',                    //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            cache: false,                     //清除页面上的缓存
            contentType: "application/x-www-form-urlencoded",
            rownumbers: true,                  //显示行号
            loadMsg: '正在加载...',
            //striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "client",         //分页方式：client客户端分页，server服务端分页（*）
            //striped: true,                      //是否显示行间隔色
            showExport: true,  //是否显示导出按钮
            buttonsAlign: "right",  //按钮位置
            exportDataType: 'all',   //导出的方式 all全部 selected已选择的  basic', 'all', 'selected'.
            Icons: 'glyphicon glyphicon-export', //导出图标
            exportTypes: ['excel', 'doc', 'xlsx', 'csv', 'txt', 'sql'],  //导出文件类型 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'
            exportOptions: {
                ignoreColumn: [0, 1],  //忽略某一列的索引  
                fileName: '店铺总报表',  //文件名称设置  
                worksheetName: 'sheet1',  //表格工作区名称  
                tableName: '店铺总报表',
                excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
            },
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            pageSize: 5,                        //每页的记录行数（*）
            pageList: [5, 10, 15, 20],          //可供选择的每页的行数（*）
            search: false,                      //是否显示表格搜索
            //strictSearch: true,
            showColumns: true,                  //是否显示所有的列（选择显示的列）
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "S_ID",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            //rowStyle: function (row, index) {
            //    var classesArr = ['success', 'info'];
            //    var strclass = "";
            //    if (index % 2 === 0) {//偶数行
            //        strclass = classesArr[0];
            //    } else {//奇数行
            //        strclass = classesArr[1];
            //    }
            //    return { classes: strclass };
            //},//隔行变色
            //得到查询的参数
            //queryParams: function (params) {
            //    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            //        pageSize: params.pageSize,  //页面大小
            //        pageNumber: params.pageNumber, //页码
            //        S_Name: $("#S_Name").val(),
            //        S_ContactName: $("#S_Name").val(),
            //        S_Address: $("#S_Address").val(),
            //    };
            //    return temp;
            //},
            queryParams: function (parms) {
                return {
                    //pageNumber: Math.ceil(parms.offset / parms.limit) + 1,
                    //pageSize: parms.limit,
                    //pageSize: params.pageSize,  //页面大小
                    //pageNumber: params.pageNumber, //页码
                    S_Name: $("#txtS_Name").val(),//店铺名称
                    S_ContactName: $("#txtS_ContactName").val(),//店铺联系人
                    S_Address: $("#txtS_Address").val()//地址
                };
            },
            columns: [{
                checkbox: true,
                visible: true     //是否显示复选框
            }, {
                field: 's.S_ID',   //s.
                width: 100,
                title: '店铺编号',
                //sortable: true,
                align: 'center',
            }, {
                field: 's.S_Name',
                title: '店铺名称',
                width: 100,
                align: 'center',
                //formatter: function (value) {
                //    return "<span class='badge bg-green'  style='padding:5px 10px;'>" + value + "</span>";
                //}
                //sortable: true
            }, {
                field: 's.S_Category',
                width: 100,
                title: '店铺类别',
                //sortable: true,
                align: 'center',
                //formatter: emailFormatter
                formatter: function (val) {
                    return val == "1" ? "<span class='label label-success' style='padding:5px 10px;'>总   部</span>" : val == "2" ? "<span class='label label-info' style='padding:5px 10px;'>加盟店</span>" : "<span class='label label-warning' style='padding:5px 10px;'>自营店</span>"
                }
            }, {
                field: 's.S_ContactTel',
                width: 100,
                title: '电话号码',
                align: 'center',
                //formatter: linkFormatter
            }, {
                field: 's.S_Address',
                width: 100,
                align: 'center',
                title: '地址',
                //formatter: function (value, row, index) {
                //    index += 1;
                //    return index;
                //}
            }, {
                field: 's.S_Remark',
                width: 100,
                title: '备注',
                align: 'center',
                //sortable: true
            }, {
                field: 's.S_IsHasSetAdmin',
                title: '是否以分配管理员',
                width: 120,
                align: 'center',
                formatter: function (val) {
                    var state;
                    if (val == true) {
                        state = "<span class='label label-success' style='padding:5px 10px;'>以分配</span>";
                    } else {
                        state = "<span class='label label-important'  style='padding:5px 10px;'>未分配</span>";
                    }
                    return state;
                    //return val == true ? "以分配" : "未分配"
                }
            }, {
                field: 's.S_CreateTime',
                width: 100,
                align: 'center',
                title: '加盟时间',
                formatter: function (val) {
                    if (val != null) {
                        var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10));
                        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                        return date.getFullYear() + "-" + month + "-" + currentDate;
                    }
                    if (val == null) {
                        return "";
                    }

                }
            }, {
                field: '', title: '操作', width: 200, align: 'center',
                formatter: function (value, row, index) {
                    if (row.s.S_IsHasSetAdmin) {
                        return "<a href='javascript:;' class='btn btn-mini btn-info' \"EditS('" + row.s.S_ID + "')\" title='编辑'><span class='icon-pencil'></span></a>&nbsp;&nbsp;"
                       + "<a href='javascript:;' class='btn btn-mini btn-danger' \"DeleteS('" + row.s.S_ID + "')\" title='删除'><span class='icon-remove'></span></a>";

                    } else {
                        return "<a href='javascript:;' class='btn btn-mini btn-info' \"EditS('" + row.s.S_ID + "')\" title='编辑'><span class='icon-pencil'></span></a>&nbsp;&nbsp;"
                        + "<a href='javascript:;' class='btn btn-mini btn-danger' \"DeleteS('" + row.s.S_ID + "')\" title='删除'><span class='icon-remove'></span></a>&nbsp;&nbsp;"
                        + "<a href='javascript:;' class='btn btn-mini btn-success' \"CreateS('" + row.s.S_ID + "', view='view')\" title='分配管理员'><span class='icon-signin'></span></a>";
                    }

                }
            }
            ],
            //onLoadSuccess: function () {
            //},
            //onLoadError: function () {
            //    showTips("数据加载失败！");
            //},
            //onDblClickRow: function (row, $element) {
            //    var id = row.ID;
            //    EditViewById(id, 'view');
            //},
        });

博主才疏学浅 如有大佬看见 请多多见谅！
如有问题联系 qq:1580551707 请备注 谢谢！