bootstrap Table动态绑定数据并自定义字段显示值

第一步：我们在官网下载了bootstrap 的文档，并在项目中引入bootstrap table相关js文件，当然，也要记得引入jquery文件

大概如图：

第二步：定义一个table控件

第三步：js绑定数据

<script>

    $(function () {
        initTable();
    })

    //初始化表格
    function initTable() {

        //先销毁表格

        $("#userTable").bootstrapTable('destroy');

        $("#userTable").bootstrapTable({

            method: "get",
            url: "/userManagement/UserData",//请求路径
            striped: true,//表格显示条纹
            pagination: true,//是否显示分页
            pageSize: 3,
            pageNumber: 1,
            pageList: [5, 10, 15, 20, 25],
            showColumns: true,
            showRefresh: true,//是否显示刷新按钮
            sidePagination: "server",//表示从服务端获取数据 --必须有
            queryParamsType: "undefined",//定义参数类型
            clickToSelect: true,
            queryParams: function (params) {
                var param = {

                    pageIndex: params.pageNumber,
                    pageSize: params.pageSize
                };

                return param;

            },
            columns: [{
                aligin: 'center',
                checkbox: true,//显示复选框
            },
            {
                field: 'userId',
                title: '#',
                align: 'center',
                visible: true,
            },
            {
                field: 'userName',
                title: '昵称',
                align: 'center',
            },
            {
                field: 'userPwd',
                title: '密码',
                align: 'center',
            },
            {
                field: 'userTel',
                title: '电话',
                align: 'center',
            },
            {
                field: 'email',
                title: '邮箱',
                align: 'center',
            },
            {
                field: 'userImg',
                title: '头像',
                align: 'center',
            },
            {
                field: 'createTime',
                title: '注册时间',
                //获取日期列的值进行转换
                formatter: function (value, row, index) {
                    return changeDateFormat(value)
                },
                align: 'center',
            },
            {
                field: 'lastTime',
                title: '最后更新时间',
                //获取日期列的值进行转换
                formatter: function (value, row, index) {
                    return changeDateFormat(value)
                },
                align: 'center',
            },
            {
                field: 'isAble',
                title: '是否可用',
                formatter : function (value, row, index) {
                    if (row['isAble'] === 1) {
                        return '正常';
                    }
                    if (row['isAble'] === 2) {
                        return '禁用';
                    }
                    return value;
                },
                align: 'center',
                
            },
            {
                field: 'isLine',
                title: '是否在线',
                formatter: function (value, row, index) {
                    if (row['isLine'] === 1) {
                        return '在线';
                    }
                    if (row['isLine'] === 2) {
                        return '下线';
                    }
                    return value;
                },
                align: 'center',
            },
            {
                field: 'remark',
                title: '备注信息',
                align: 'center',
            }],
            onLoadSuccess: function (data) {
                console.log(data);

            },
            onLoadError: function (data) {
                console.log(data);
            }
        })

        $("#add").click(function ()
        {
            $("#myModal").modal('show');
        })
        $("#edit").click(function () {
            $("#myModal").modal('show');
        })
        $("#close").click(function () {
            $("#myModal").modal('hide');
        });
    }

    //转换日期格式(时间戳转换为datetime格式)
    function changeDateFormat(cellval) {
        var dateVal = cellval + "";
        if (cellval != null) {
            var date = new Date(parseInt(dateVal.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();

            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

            return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
        }
    }

</script>

第四步：得到数据库数据

/// <summary>
        /// 用户数据列表
        /// </summary>
        /// <param name="pageIndex"></param>
        /// <param name="pageSize"></param>
        /// <returns></returns>
        public ActionResult UserData(int pageIndex=1,int pageSize=5)
        {
            EFHelper<FileDBEntities> fileDB = new EFHelper<FileDBEntities>();
            var result = fileDB.GetList<userInfo>();
            var dataList = (from user in result
                            orderby user.userId
                            select new
                            {
                                user.userId,
                                user.userName,
                                user.userPwd,
                                user.userTel,
                                user.email,
                                user.userImg,
                                user.createTime,
                                user.lastTime,
                                user.isAble,
                                user.isLine,
                                user.remark
                            }).Skip(pageSize * (pageIndex - 1)).Take(pageSize);
            long totalCount = result.Count();
            var jsonResult = new { total = totalCount, rows = dataList };
            return Json(jsonResult, JsonRequestBehavior.AllowGet);

            
        }

显示效果如图：

备注：如果表内有外键关系，可直接查询，无需连表，如图

js绑定数据如下图：