bootstrap table使用总结

/*bootstrap table*/
$('#table').bootstrapTable({
    url:"/wadmin/permission/doRuleList",//请求数据url
    queryParams: function (params) {
        return {
            offset: params.offset,  //页码
            limit: params.limit,   //页面大小
            search : params.search, //搜索
            order : params.order, //排序
            ordername : params.sort, //排序
        };
    },
    showHeader : true,
    showColumns : true,
    showRefresh : true,
    pagination: true,//分页
    sidePagination : 'server',//服务器端分页
    pageNumber : 1,
    pageList: [5, 10, 20, 50],//分页步进值
    search: true,//显示搜索框
    //表格的列
    columns: [
        {
            field: 'id',//域值
            title: '规则ID',//标题
            visible: true,//false表示不显示
            sortable: true,//启用排序
            width : '5%',
        },
        {
            field: 'name',//域值
            title: '唯一英文标识',//标题
            visible: true,//false表示不显示
            sortable: true,//启用排序
            width : '30%',
            editable:true,
        },
        {
            field: 'title',//域值
            title: '中文描述',//内容
            visible: true,//false表示不显示
            sortable: true,//启用排序
            width : '35%',
            editable:true,
        },
        {
            field: 'status',//域值
            title: '状态',//内容
            visible: true,//false表示不显示
            sortable: true,//启用排序
            width : '20%',
            formatter : function (value, row, index) {
                if (row['status'] === 1) {
                    return '正常';
                }
                if (row['status'] === 0) {
                    return '禁用';
                }
                return value;
            }
        }
    ]
});

项目里面的一部分配置

 function getTab() {
    $.BTTable("#dataTable", {
        method: 'get', //请求类型
        url: "/UserDetail/GetDataList",//请求地址
        pageList: [10, 15, 50, 100],//页数列表
        pageSize: 10,
        pageNumber: 1,
        queryParams: queryParams,//参数
        columns: [
            {
                title: "序号",
                field: "RowID",//RowID为rows里面每条数据里面的键，插件自己会调出值
                align: "center",
                valign: "center",
                width: "100",
            }, {
                title: "中控工号",
                field: "PingID",
                align: "center",
                valign: "center",
                width: "100",
            }, {
                title: "员工姓名",
                field: "Name",
                align: "center",
                valign: "center",
                width: "100",
            }, {
                title: "所属系统",
                field: "System",
                align: "center",
                valign: "center",
                width: "100",
                formatter: SystemType
            }, {
                title: "公司名称",
                field: "Company",
                align: "center",
                valign: "center",
                width: "100",
            }, {
                title: "分公司名称",
                field: "BCompany",
                align: "center",
                valign: "center",
                width: "100",
            }, {
                title: "所属部门",
                field: "DeptName",
                align: "center",
                valign: "center",
                width: "100",
            }, {
                title: "入职日期",
                field: "EntryDateTime",
                align: "center",
                valign: "center",
                width: "100",
                formatter: ShowDate
            }, {
                title: "转正日期",
                field: "ChangeDate",
                align: "center",
                valign: "center",
                width: "100",
            }, {
                field: 'ces',
                title: "操作",
                align: 'center',
                width: '180',
                valign: 'center',
                formatter: EditeOpt//返回当前列表的内容
            }
        ], onLoadSuccess: function () {

        },
        onLoadError: function () {
            //mif.showErrorMessageBox("数据加载失败！");
        }
    });
}
//编辑列   formatter键对应的函数会有参数，第一个参数为当前a的值，第二个参数为这个a所在的整行数据
function EditeOpt(obj, row) {
    return '<a class ="btn btn-info btn-xs" onclick="KQCalendar(\'' + row.GUID + '\',\'' + row.Name + '\',\'' + row.EntryDateTime + '\')">考勤记录</a> ';
}

数据格式

{
    "total": 522,
    "rows": [
    {
        "ID": 0,
        "GUID": "687ee1d8-6731-43a9-9d52-235f426fbc08",
        "PName": "投资顾问",
        "Name": "李金娣",
        "CreatDate": "2017-11-28",
        "Remark": null,
        "RankId": 24,
        "RankName": "投资顾问",
        "Status": 1,
        "Tel": "13616502732",
        "Email": null,
        "Sex": "0",
        "EID": 3,
        "Cid": 12,
        "Pid": 222,
        "MURL": "ht8.229.222:191/File/20171128141823407.pdf",
        "Age": 48,
        "UDType": 5,
        "RID": 0,
        "ContractType": 1,
        "DocumentType": "居民身份证",
        "Number": "33012519690104522X",
        "Birthday": "1969-01-04",
        "HighestEID": 3,
        "IsInterview": 0,
        "DeptCode": "63ea705a-13e4-4409-ac42-eb5abefe02dc",
        "DeptName": "-",
        "PingID": "000008167",
        "Marriage": "1",
        "Procreate": "2",
        "PlaceCID": 37,
        "EntryDateTime": "2017-11-21",
        "CompanyEmail": null,
        "Company": "至善基金",
        "BCompany": "余杭仓前第一营业部",
        "ChangeDate": "",
        "System": "2",
        "DepCentet": "",
        "RowID": 1,
        "ISLeader": 2,
        "QuitDate": null,
        "QuitReason": null,
        "QuitType": null,
        "CompanyPower": null,
        "ManagerConfirm": 0,
        "ChiefConfirm": 0,
        "Portrait": null,
        "LeaderPing": "000008153",
        "LeaderName": "金霞娟",
        "IsLegalPerson": "否"
    },
    {
        "ID": 0,
        "GUID": "34f9ceda-faae-453c-adab-449fb013b445",
        "PName": "IT总监",
        "Name": "曹燕",
        "CreatDate": "2017-11-13",
        "Remark": null,
        "RankId": 4,
        "RankName": "总监",
        "Status": 1,
        "Tel": "18621778199",
        "Email": "addincaoy@163.com",
        "Sex": "1",
        "EID": 1,
        "Cid": 1,
        "Pid": 302,
        "MURL": "htt121:191/File/20171113163701595.doc",
        "Age": 35,
        "UDType": 5,
        "RID": 0,
        "ContractType": 1,
        "DocumentType": "居民身份证",
        "Number": "430424198111281853",
        "Birthday": "1981-11-28",
        "HighestEID": 1,
        "IsInterview": 0,
        "DeptCode": "980aed61-1576-4485-88df-4a6ff19daf3a",
        "DeptName": "信息管理部",
        "PingID": "000000329",
        "Marriage": "1",
        "Procreate": "2",
        "PlaceCID": 55,
        "EntryDateTime": "2017-11-21",
        "CompanyEmail": null,
        "Company": "至善基金总部",
        "BCompany": "",
        "ChangeDate": "",
        "System": "1",
        "DepCentet": "信息管理中心",
        "RowID": 4,
        "ISLeader": 2,
        "QuitDate": null,
        "QuitReason": null,
        "QuitType": null,
        "CompanyPower": null,
        "ManagerConfirm": 0,
        "ChiefConfirm": 0,
        "Portrait": null,
        "LeaderPing": null,
        "LeaderName": null,
        "IsLegalPerson": "否"
    },
    {
        "ID": 0,
        "GUID": "0fb099d6-f5dc-4bdb-b5e1-f8e2a8587797",
        "PName": "分部总监",
        "Name": "刘明亮",
        "CreatDate": "2017-11-07",
        "Remark": null,
        "RankId": 19,
        "RankName": "分部总监",
        "Status": 1,
        "Tel": "13918139755",
        "Email": null,
        "Sex": "1",
        "EID": 3,
        "Cid": 1,
        "Pid": 35,
        "MURL": "ht21:191/File/20171116172543161283.doc",
        "Age": 49,
        "UDType": 5,
        "RID": 0,
        "ContractType": 1,
        "DocumentType": "居民身份证",
        "Number": "31010419680721241X",
        "Birthday": "1968-07-21",
        "HighestEID": 3,
        "IsInterview": 0,
        "DeptCode": "46554dbc-577a-4280-8e96-852ddd6071b8",
        "DeptName": "-",
        "PingID": "000003097",
        "Marriage": "1",
        "Procreate": "2",
        "PlaceCID": 55,
        "EntryDateTime": "2017-11-20",
        "CompanyEmail": null,
        "Company": "扬凯投资",
        "BCompany": "上海第一营业部",
        "ChangeDate": "",
        "System": "2",
        "DepCentet": "",
        "RowID": 9,
        "ISLeader": 2,
        "QuitDate": null,
        "QuitReason": null,
        "QuitType": null,
        "CompanyPower": null,
        "ManagerConfirm": 0,
        "ChiefConfirm": 0,
        "Portrait": "ht.121:191/Portrait/20171122145713992721.jpg",
        "LeaderPing": null,
        "LeaderName": null,
        "IsLegalPerson": "否"
    },
    {
        "ID": 0,
        "GUID": "17ebc6c5-2dbb-4ada-abeb-d9e520de3f85",
        "PName": "分部总监",
        "Name": "黄晓",
        "CreatDate": "2017-11-07",
        "Remark": null,
        "RankId": 19,
        "RankName": "分部总监",
        "Status": 1,
        "Tel": "18930604029",
        "Email": null,
        "Sex": "0",
        "EID": 3,
        "Cid": 1,
        "Pid": 35,
        "MURL": ":191/File/20171116173247148931.doc",
        "Age": 47,
        "UDType": 5,
        "RID": 0,
        "ContractType": 1,
        "DocumentType": "居民身份证",
        "Number": "310105197002110820",
        "Birthday": "1970-02-11",
        "HighestEID": 3,
        "IsInterview": 0,
        "DeptCode": "46554dbc-577a-4280-8e96-852ddd6071b8",
        "DeptName": "-",
        "PingID": "  000003096 ",
        "Marriage": "1",
        "Procreate": "2",
        "PlaceCID": 55,
        "EntryDateTime": "2017-11-20",
        "CompanyEmail": null,
        "Company": "扬凯投资",
        "BCompany": "上海第一营业部",
        "ChangeDate": "",
        "System": "2",
        "DepCentet": "",
        "RowID": 10,
        "ISLeader": 2,
        "QuitDate": null,
        "QuitReason": null,
        "QuitType": null,
        "CompanyPower": null,
        "ManagerConfirm": 0,
        "ChiefConfirm": 0,
        "Portrait": "ht1:191/Portrait/20171122145731246185.jpg",
        "LeaderPing": null,
        "LeaderName": null,
        "IsLegalPerson": "否"
    }]
}

别人的博客