引用的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);
            }
  
        }

　　

源码下载

转载于:https://www.cnblogs.com/fuqiang88/p/4736941.html

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

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

    Spark资源调度机制源码分析--基于spreadOutApps及非spreadOutApps两种资源调度算法 1.spreadOutApp尽量平均分配到每个executor上: 2.非spreadO ...

  2. android asynctask源码分析,Android通过Handler与AsyncTask两种方式动态更新ListView(附源码)...

    本文实例讲述了Android通过Handler与AsyncTask两种方式动态更新ListView的方法.分享给大家供大家参考,具体如下: 有时候我们需要修改已经生成的列表,添加或者修改数据,noti ...

  3. 从源码分析DEARGUI之动态绘图的两种方法

    from dearpygui.dearpygui import * import numpy as npdef addButtons(*args):add_button("添加的按钮1&qu ...

  4. 宝塔定时任务执行php源码任务_ThinkPHP框架实现定时执行任务的两种方法分析

    本文实例讲述了ThinkPHP框架实现定时执行任务的两种方法.分享给大家供大家参考,具体如下: 在平常的项目中我们总是会遇到需要将某个方法任务定时执行的问题,定时执行方法任务如果我们拥有服务器的权限, ...

  5. C#使用Xamarin开发可移植移动应用进阶篇(8.打包生成安卓APK并精简大小),附源码

    我记得,之前在写安卓方面的文章的时候,有人就问过我.Xamarin.Android为什么打包出来这么大?随便一个HelloWord就20-30MB? 嗯..今天我们就来解决这个问题.. 我们先从指定一 ...

  6. C#使用Xamarin开发可移植移动应用进阶篇(7.使用布局渲染器,修改默认布局),附源码

    本篇..基本可以算是Xamarin在应用开发过程中的核心了..真的很很很重要.. 想学习的..想用的..建议仔细阅读..嗯..打酱油的 ..快速滑倒下面点个推荐 - - 哈哈哈... 今天的学习内容? ...

  7. C#使用Xamarin开发可移植移动应用进阶篇(6.使用渲染器针对单个平台自定义控件),附源码

    本篇..基本可以算是Xamarin在应用开发过程中的核心了..真的很很很重要.. 想学习的..想用的..建议仔细阅读..嗯..打酱油的 ..快速滑倒下面点个推荐 - - 哈哈哈... 今天的学习内容? ...

  8. 手把手教你用Python批量实现在Excel后里面新加一列，并且内容为excel 表名（附源码）...

    点击上方"Python爬虫与数据挖掘",进行关注 回复"书籍"即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 打起黄莺儿,莫教枝上啼. 大家好, ...

  9. 特别好用的Vue富文本编辑器wangEditor自己使用案例组件，附源码，直接使用

    前言:已组件化,引入即可使用,包含本地图片上传可拖拽大小.效果图如下:附源码 1.首先老规矩,引入下面两个包 npm i @wangeditor/editor --save npm i @wanged ...

最新文章

  1. 混合云备份利用自定义Workflow保护MySQL的实践
  2. seaborn系列 (9) | 分簇散点图swarmplot()
  3. 计算机考试字字处理重点,计算机等级考试一级B上机试题：字表处理题(1)
  4. 海西数据获评优秀服务器租用服务商奖项
  5. 【Python基础】Pandas笔记---概述与数据结构
  6. cmd打开java文件夹_Java用CMD打开指定文件和文件夹
  7. C# 生成私钥和公钥
  8. 【转载】OpenStack Swift学习笔记
  9. JAVA中randomfile_java中的RandomAccessFile的用法
  10. 链表的基本操作Basic Operation of LinkList
  11. 经济学计算机是必修课吗,大学中经济学专业的每年的必修课是什么？例如...
  12. bootstrap3中使用bootstrap-datetimepicker日期插件的用法
  13. 部分适配尼康Z卡口 三阳推出五款大光圈镜头
  14. 2022年哈尔滨工业大学计算机考研复试分数线多少
  15. jz2440：开发板的u-boot + 内核 + 根文件系统搭建（2）
  16. Android获取的MP3音乐的专辑封面图片
  17. Eigen vs Armadillo
  18. atch: shared pool 优化探索
  19. Python中的GIL问题
  20. 彩虹服务器列表文件,彩虹引擎服务器架构图最详细的讲解

热门文章

  1. 使用Unity引擎打造赛博朋克之城！CIGA Game Jam 2019 48小时独立游戏开发挑战
  2. 开工啦，开工啦，2022开工了
  3. MYSQL慢日志探索
  4. oracle11g-asm实例中asmlib和raw的使用问题
  5. [转]怎样看懂Oracle的执行计划
  6. `MediaDevices.getUserMedia` `undefined` 的问题
  7. Python档案袋（列表、元组、字典、集合 )
  8. 编译OpenJDK及JDK题外话
  9. 关于box-shadow、border-radius不兼容ie8的解决办法
  10. matlab中负于穷,穷虫50金！ MATLAB的fsolve初值问题