BootstrapTable（附源码） Bootstrap结合BootstrapTable的使用，分为两种模试显示列表。

引用的css：

<link href="@Url.Content("~/Css/bootstrap.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Css/bootstrap-table.css")" rel="stylesheet" type="text/css" />

引用的JS：

<script src="../../Scripts/jquery.js" type="text/javascript"></script>

<script src="../../Scripts/bootstrap.min.js" type="text/javascript"></script>

<script src="../../Scripts/bootstrap-table.js" type="text/javascript"></script>

<script src="../../Scripts/bootstrap-table-zh-CN.js" type="text/javascript"></script>

常用方法：

刷新表格：$table.bootstrapTable(‘refresh‘);

获取选择的行：$table.bootstrapTable(‘getSelections‘);

1.服务端请求：即当数据量大，千百万条数据的情况下，只获取当页条件下的数据。每点击分页或查询都向服务端重新获取分页数据。

前端代码：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

function initTable() {

            var queryUrl = ‘@Url.Content("~/Welcome/QueryList")‘ + ‘?rnd=‘ + +Math.random();

            $table = $(‘#table-javascript‘).bootstrapTable({

                method: ‘get‘,

                url: queryUrl,

                height: $(window).height() - 200,

                striped: true,

                pagination: true,

                singleSelect: false,

                pageSize: 50,

                pageList: [10, 50, 100, 200, 500],

                search: false, //不显示 搜索框

                showColumns: false, //不显示下拉框（选择显示的列）

                sidePagination: "server", //服务端请求

                queryParams: queryParams,

                minimunCountColumns: 2,

                columns: [{

                    field: ‘state‘,

                    checkbox: true

                }, {

                    field: ‘Name‘,

                    title: ‘姓名‘,

                    width: 100,

                    align: ‘center‘,

                    valign: ‘middle‘,

                    sortable: true,

                    formatter: nameFormatter

                }, {

                    field: ‘Gender‘,

                    title: ‘性别‘,

                    width: 40,

                    align: ‘left‘,

                    valign: ‘top‘,

                    sortable: true,

                    formatter: sexFormatter,

                    sorter: priceSorter

                }, {

                    field: ‘Birthday‘,

                    title: ‘出生日期‘,

                    width: 80,

                    align: ‘left‘,

                    valign: ‘top‘,

                    sortable: true

                }, {

                    field: ‘CtfId‘,

                    title: ‘身份证‘,

                    width: 80,

                    align: ‘middle‘,

                    valign: ‘top‘,

                    sortable: true

                }, {

                    field: ‘Address‘,

                    title: ‘地址‘,

                    width: 180,

                    align: ‘left‘,

                    valign: ‘top‘,

                    sortable: true

                }, {

                    field: ‘Tel‘,

                    title: ‘固定电话‘,

                    width: 100,

                    align: ‘left‘,

                    valign: ‘top‘,

                    sortable: true

                }, {

                    field: ‘Mobile‘,

                    title: ‘手机号码‘,

                    width: 100,

                    align: ‘left‘,

                    valign: ‘top‘,

                    sortable: true

                }, {

                    field: ‘operate‘,

                    title: ‘操作‘,

                    width: 100,

                    align: ‘center‘,

                    valign: ‘middle‘,

                    formatter: operateFormatter,

                    events: operateEvents

                }],

                onLoadSuccess:function(){

 

                },

                onLoadError: function () {

                    mif.showErrorMessageBox("数据加载失败！");

                }

            });

        }

//传递的参数

function queryParams(params) {

            return {

                pageSize: params.pageSize,

                pageIndex: params.pageNumber,

                UserName: $("#txtName").val(),

                Birthday: $("#txtBirthday").val(),

                Gender: $("#Gender").val(),

                Address: $("#txtAddress").val(),

                name: params.sortName,

                order: params.sortOrder

            };

        }

　　

服务器端代码：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

public ActionResult QueryList(int pageIndex = 1, int pageSize = 100)

        {

            try

            {

                string name = Request["UserName"];

                string birthday = Request["Birthday"];

                string gender = Request["Gender"];

                string Address = Request["Address"];

                Document docQuery = new Document();

                if (!string.IsNullOrEmpty(name))

                {

                    docQuery.Add("Name", new MongoRegex(".*" + name + ".*", MongoRegexOption.IgnoreCase));

                }

                if (!string.IsNullOrEmpty(birthday))

                {

                    docQuery.Add("Birthday", new MongoRegex(".*" + birthday + ".*", MongoRegexOption.IgnoreCase));

                }

                if (!string.IsNullOrEmpty(gender))

                {

                    docQuery.Add("Gender", gender);

                }

                if (!string.IsNullOrEmpty(Address))

                {

                    docQuery.Add("Address", new MongoRegex(".*" + Address + ".*", MongoRegexOption.IgnoreCase));

                }

                if (this.HttpContext.Request.QueryString.AllKeys.Contains("ToExcel"))

                {

                    List<OpenRoom> listExport = MongoDbHelper.GetList<OpenRoom>(MongoTables.OpenRoom, docQuery);

                    //List<string> listTilte = new List<string> { "" };

                    ExportMethod(listExport);

                }

                long totalCount = MongoDbHelper.GetTotalCount<OpenRoom>(MongoTables.OpenRoom, docQuery);

                var list = MongoDbHelper.GetList<OpenRoom>(MongoTables.OpenRoom, docQuery, new Document(), pageIndex, pageSize);

                string jsonString = JsonHelper.ObjToJson(list);

                jsonString = "{\"total\":" + totalCount.ToString() + ",\"rows\":" + jsonString + "}";

                return Content(jsonString);

            }

            catch (Exception ex)

            {

                return Content(ex.Message);

            }

 

        }

　　

注意返回的格式：要返回总记录数total及分页后数据rows。

未解决问题：导出Excel时，超出65536行数据时，会异常。怎样解决这个问题？

2.客户端请求：当数据量较少，只有上千条数据时，一次性将所有数据返回给客户端，无论点下一页，或搜索条件时，不向服务端发请求，实现全文检索。

这个比较简单，将sidePagination属性设为 "client",因为客户端会处理分页和全文检索，无需向服务器端发请求，所以也无需传递参数。

前端JS:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

function initTable() {

            var queryUrl = ‘@Url.Content("~/UserInfo/QueryList")‘ + ‘?rnd=‘ + +Math.random();

            $table = $(‘#table-javascript‘).bootstrapTable({

                method: ‘get‘,

                url: queryUrl,

                height: $(window).height() - 200,

                striped: true,

                pagination: true,

                pageSize: 50,

                pageList: [10, 25, 50, 100, 200],

                search: true,

                sidePagination: "client",

                showColumns: true,

                minimunCountColumns: 2,

                columns: [{

                    field: ‘state‘,

                    radio: true

                }, {

                    field: ‘Id‘,

                    title: ‘ID‘,

                    align: ‘right‘,

                    valign: ‘bottom‘,

                    sortable: true

                }, {

                    field: ‘UserName‘,

                    title: ‘姓名‘,

                    width: 100,

                    align: ‘center‘,

                    valign: ‘middle‘,

                    sortable: true,

                    formatter: nameFormatter

                }, {

                    field: ‘Account‘,

                    title: ‘账号‘,

                    align: ‘left‘,

                    valign: ‘top‘,

                    sortable: true

                }, {

                    field: ‘Address‘,

                    title: ‘家乡‘,

                    align: ‘middle‘,

                    valign: ‘top‘,

                    sortable: true

                }, {

                    field: ‘Phone‘,

                    title: ‘电话‘,

                    align: ‘left‘,

                    valign: ‘top‘,

                    sortable: true

                }, {

                    field: ‘QQ‘,

                    title: ‘QQ号码‘,

                    align: ‘left‘,

                    valign: ‘top‘,

                    sortable: true

                }, {

                    field: ‘Remark‘,

                    title: ‘备注‘,

                    align: ‘left‘,

                    valign: ‘top‘,

                    sortable: true

                }, {

                    field: ‘operate‘,

                    title: ‘操作‘,

                    align: ‘center‘,

                    width: 100,

                    valign: ‘middle‘,

                    formatter: operateFormatter,

                    events: operateEvents

                }]

            });

        }

　　

后台直接返回Json数据即可。

后台代码：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

public ActionResult QueryList()

        {

            try

            {

                List<sys_user> list = accessHelper.GetUserList();

                string jsonString = JsonHelper.ObjToJson(list);

                return Content(jsonString);

            }

            catch (Exception ex)

            {

                return Content(ex.Message);

            }

 

        }

　　

源码下载

时间： 2024-08-29 10:32:07

BootstrapTable（附源码） Bootstrap结合BootstrapTable的使用，分为两种模试显示列表。的相关文章

Spark资源调度机制源码分析--基于spreadOutApps及非spreadOutApps两种资源调度算法

Spark资源调度机制源码分析--基于spreadOutApps及非spreadOutApps两种资源调度算法 1.spreadOutApp尽量平均分配到每个executor上: 2.非spreadOutApp尽量在使用单个executor的资源. 源码分析 org.apache.spark.deploy.master.Master 1.首先判断,master状态不是ALIVE的话,直接返回2.调度driver3. Application的调度机制(核心之核心,重中之重) 源码如下: 1 /*

时尚设计！三种奇特的网格加载效果【附源码下载】

如果你看过三星企业设计中心网站,你肯定已经注意到了时尚的网格加载效果.每一项加载的时候,背景色会首先滑出,然后图像显现出来.滑动颜色表示图像,也就是说它是彩色图像的主色. 在这篇文章中,我们想向您展示了如何使用 Masonry 网格砌体插件,结合 CSS 动画重现这种效果.另外在这里,我们还借助了 ColorFinder 来获得的图像的最突出的颜色来作为初始的加载背景色使用. 立即下载      在线演示 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safar

使用 SVG 制作单选和多选框动画【附源码】

通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中的时候执行 SVG 动画. 在线演示      立即下载 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 对于自定义的复选框或单选按钮,我们使用标签的伪元素 ::before 并通过设置不透明度为0来因此输入框.初始,我们通过 Ja

太赞了！超炫的页面切换动画效果【附源码下载】

今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果.虽然有些效果都非常简单,只是简单的滑动动作,但另外的一些则是利用了视角(Perspective)和 3D 转换(3D Transforms)来创造一些立体动感的效果. 立即下载      在线演示 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. CSS 动画根据它们的实现的效果分为不同的组.为展示

手把手实现Java图书管理系统（附源码）

基于SSM的图书管理系统的设计与实现 一.系统简介 本课程演示的是一套基于Java的SSM框架实现的图书管理系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的java人群. 详细介绍了图书管理系统的实现,包括:1.环境搭建2.系统功能3.技术实现4.项目运行5.功能演示6.系统扩展 以通俗易懂的方式,手把手的带你从零开始运行本套图书管理系统,该项目附带全部源码可作为毕设使用. 二.技术实现 1.后台框架:Spring.SpringMVC.MyBatis2.UI界面:BootStr

手把手搭建Java网上银行系统【附源码】（毕设）

一.项目简介 本课程演示的是一套基于Java的SSH框架实现的网上银行系统 或 银行管理系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的java人群. 详细介绍了网上银行系统的实现,包括:1.项目介绍2.环境搭建3.系统功能4.技术实现5.项目运行6.功能演示 以通俗易懂的方式,手把手的带你从零开始运行本套网上银行系统,该项目附带全部源码可作为毕设使用. 二.技术实现 1.后台框架:SSH(Spring.Struts2.Hibernate) 2.UI界面:BootStrap.j

手把手搭建Java健身房管理系统【附源码】（毕设）

一.项目简介 本课程演示的是一套基于JavaWeb实现的健身房管理系统 或 健身俱乐部管理系统 或 健身会所管理系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的java人群. 详细介绍了健身房管理系统的实现,包括:1.项目介绍2.环境搭建3.系统功能4.技术实现5.项目运行6.功能演示 以通俗易懂的方式,手把手的带你从零开始运行本套健身房管理系统,该项目附带全部源码可作为毕设使用. 二.技术实现 1.后台框架:Spring.SpringMVC.Hibernate 2.?UI界面

手把手搭建Java金融借贷系统【附源码】（毕设）

一.项目简介 本课程演示的是一套基于基于JavaWeb实现的金融借贷系统 或 P2P金融管理系统 或 小额贷款系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的java人群. 详细介绍了金融借贷系统的实现,包括:1.项目介绍2.环境搭建3.系统功能4.技术实现5.项目运行6.功能演示 以通俗易懂的方式,手把手的带你从零开始运行本套金融借贷系统,该项目附带全部源码可作为毕设使用. 二.技术实现 1.后台框架:Servlet.JDBC.FileUpload 2.UI界面:BootSt

手把手搭建Java在线商城系统【附源码】（毕设）

一.项目简介 本课程演示的是一套基于Java的SSM框架实现的在线商城系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的java人群. 详细介绍了在线商城系统的实现,包括:1.项目介绍2.环境搭建3.系统功能4.技术实现5.项目运行6.功能演示 以通俗易懂的方式,手把手的带你从零开始运行本套在线商城系统,该项目附带全部源码可作为毕设使用. 二.技术实现 1.后台框架:Spring.SpringMVC.MyBatis 2.UI界面:BootStrap.JSP.jQuery 3.数据