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: ,
             pageNumber: ,
             pageList: [, , , , ],
             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'] === ) {
                         return '正常';
                     }
                     if (row['isAble'] === ) {
                         return '禁用';
                     }
                     return value;
                 },
                 align: 'center',

             },
             {
                 field: 'isLine',
                 title: '是否在线',
                 formatter: function (value, row, index) {
                     if (row['isLine'] === ) {
                         return '在线';
                     }
                     if (row['isLine'] === ) {
                         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(")/", ""), ));
             var month = date.getMonth() +  <  ? "" + (date.getMonth() + ) : date.getMonth() + ;
             var currentDate = date.getDate() <  ? "" + date.getDate() : date.getDate();

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

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

 </script>

js绑定数据

第四步：得到数据库数据

 /// <summary>
         /// 用户数据列表
         /// </summary>
         /// <param name="pageIndex"></param>
         /// <param name="pageSize"></param>
         /// <returns></returns>
         public ActionResult UserData(int pageIndex=,int pageSize=)
         {
             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 - )).Take(pageSize);
             long totalCount = result.Count();
             var jsonResult = new { total = totalCount, rows = dataList };
             return Json(jsonResult, JsonRequestBehavior.AllowGet);

         }

得到数据库数据源

显示效果如图：

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

js绑定数据如下图：