bootstrapTable动态绑定数据并⾃定义字段显⽰值第⼀步：我们在官⽹下载了bootstrap 的⽂档，并在项⽬中引⼊bootstrap table相关js⽂件，当然，也要记得引⼊jquery⽂件
⼤概如图：
第⼆步：定义⼀个table控件
第三步：js绑定数据
1 <script>
2
3    $(function () {
4        initTable();
bootstrap项目5    })
6
7//初始化表格
8    function initTable() {
9
10//先销毁表格
11
12        $("#userTable").bootstrapTable('destroy');
13
14        $("#userTable").bootstrapTable({
15
16            method: "get",
17            url: "/userManagement/UserData",//请求路径
18            striped: true,//表格显⽰条纹
19            pagination: true,//是否显⽰分页
20            pageSize: 3,
21            pageNumber: 1,
22            pageList: [5, 10, 15, 20, 25],
23            showColumns: true,
24            showRefresh: true,//是否显⽰刷新按钮
25            sidePagination: "server",//表⽰从服务端获取数据 --必须有
26            queryParamsType: "undefined",//定义参数类型
27            clickToSelect: true,
28            queryParams: function (params) {
29var param = {
30
31                    pageIndex: params.pageNumber,
32                    pageSize: params.pageSize
33                };
34
35return param;
36
37            },
38            columns: [{
39                aligin: 'center',
40                checkbox: true,//显⽰复选框
41            },
42            {
43                field: 'userId',
44                title: '#',
45                align: 'center',
46                visible: true,
47            },
48            {
49                field: 'userName',
50                title: '昵称',
51                align: 'center',
52            },
53            {
54                field: 'userPwd',
55                title: '密码',
56                align: 'center',
57            },
58            {
59                field: 'userTel',
60                title: '电话',
61                align: 'center',
62            },
63            {
64                field: 'email',
65                title: '邮箱',
66                align: 'center',
67            },
68            {
69                field: 'userImg',
70                title: '头像',
71                align: 'center',
72            },
73            {
74                field: 'createTime',
75                title: '注册时间',
76//获取⽇期列的值进⾏转换
77                formatter: function (value, row, index) {
78return changeDateFormat(value)
79                },
80                align: 'center',
81            },
82            {
83                field: 'lastTime',
84                title: '最后更新时间',
85//获取⽇期列的值进⾏转换
86                formatter: function (value, row, index) {
87return changeDateFormat(value)
88                },
89                align: 'center',
90            },
91            {
92                field: 'isAble',
93                title: '是否可⽤',
94                formatter : function (value, row, index) {
95if (row['isAble'] === 1) {
96return'正常';
97                    }
98if (row['isAble'] === 2) {
99return'禁⽤';
100                    }
101return value;
102                },
103                align: 'center',
104
105            },
106            {
107                field: 'isLine',
108                title: '是否在线',
109                formatter: function (value, row, index) {
110if (row['isLine'] === 1) {
111return'在线';
112                    }
113if (row['isLine'] === 2) {
114return'下线';
115                    }
116return value;
117                },
118                align: 'center',
119            },
120            {
121                field: 'remark',
122                title: '备注信息',
123                align: 'center',
124            }],
125            onLoadSuccess: function (data) {
126                console.log(data);
127
128            },
129            onLoadError: function (data) {
130                console.log(data);
131            }
132        })
133
134        $("#add").click(function ()
135        {
136            $("#myModal").modal('show');
137        })
138        $("#edit").click(function () {
139            $("#myModal").modal('show');
140        })
141        $("#close").click(function () {
142            $("#myModal").modal('hide');
143        });
144    }
145
146//转换⽇期格式(时间戳转换为datetime格式)
147    function changeDateFormat(cellval) {
148var dateVal = cellval + "";
149if (cellval != null) {
150var date = new Date(place("/Date(", "").replace(")/", ""), 10));
151var month = Month() + 1 < 10 ? "0" + (Month() + 1) : Month() + 1;
152var currentDate = Date() < 10 ? "0" + Date() : Date();
153
154var hours = Hours() < 10 ? "0" + Hours() : Hours();
155var minutes = Minutes() < 10 ? "0" + Minutes() : Minutes();
156var seconds = Seconds() < 10 ? "0" + Seconds() : Seconds();
157
FullYear() + "-" + month + "-" + currentDate + "" + hours + ":" + minutes + ":" + seconds; 159        }
160    }
161
162 </script>
js绑定数据
第四步：得到数据库数据
1///<summary>
2///⽤户数据列表
3///</summary>
4///<param name="pageIndex"></param>
5///<param name="pageSize"></param>
6///<returns></returns>
7public ActionResult UserData(int pageIndex=1,int pageSize=5)
8        {
9            EFHelper<FileDBEntities> fileDB = new EFHelper<FileDBEntities>();
10var result = fileDB.GetList<userInfo>();
11var dataList = (from user in result
12orderby user.userId
13select new
14                            {
15                                user.userId,
16                                user.userName,
17                                user.userPwd,
18                                user.userTel,
19                                ail,
20                                user.userImg,
21                                ateTime,
22                                user.lastTime,
23                                user.isAble,
24                                user.isLine,
25                                ark
26                            }).Skip(pageSize * (pageIndex - 1)).Take(pageSize); 27long totalCount = result.Count();
28var jsonResult = new { total = totalCount, rows = dataList }; 29return Json(jsonResult, JsonRequestBehavior.AllowGet);
30
31
32        }
得到数据库数据源
显⽰效果如图：
备注：如果表内有外键关系，可直接查询，⽆需连表，如图
js绑定数据如下图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。