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

　　

源码下载

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

  1. Bootstrap结合BootstrapTable的使用，分为两种模试显示列表。 自适应表格

    引用的css: <link href="@Url.Content("~/Css/bootstrap.min.css")" rel="styles ...

  2. Bootstrap列表与代码样式(附源码)--Bootstrap

    给大家分享下Bootstrap框架中列表与代码样式相关的知识 1.列表 (1)无序列表 <ul> <li>CN217编程</li> </ul> 注意:u ...

  3. Java基础进阶:学生管理系统数组方式分包源码实现,教师管理系统集合和数组两种方式源码实现,图书馆管理系统源码实现,现附重难点,代码实现源码,课堂笔记,课后扩展及答案

    1.案例驱动模式 1.1案例驱动模式概述 (理解) 通过我们已掌握的知识点,先实现一个案例,然后找出这个案例中,存在的一些问题,在通过新知识点解决问题 1.2案例驱动模式的好处 (理解) 解决重复代码 ...

  4. BootstrapTable（附源码）

    Bootstrap结合BootstrapTable的使用,分为两种模试显示列表. 引用的css: <link href="@Url.Content("~/Css/bootst ...

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

    通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...

  6. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  7. MVC系列——MVC源码学习：打造自己的MVC框架（二：附源码）

    前言:上篇介绍了下 MVC5 的核心原理,整篇文章比较偏理论,所以相对比较枯燥.今天就来根据上篇的理论一步一步进行实践,通过自己写的一个简易MVC框架逐步理解,相信通过这一篇的实践,你会对MVC有一个 ...

  8. C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper（三：附源码）

    前言:之前的两篇封装了一些基础的表单组件,这篇继续来封装几个基于bootstrap的其他组件.和上篇不同的是,这篇的有几个组件需要某些js文件的支持. 本文原创地址:http://www.cnblog ...

  9. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

随机推荐

  1. 让你的MyEclipse具有jquery自动提示

    想让你的MyEclipse支持Jquery的自动提示更简单一些,照下图完成即可:      照上面图示已经完成了Jquery自动提示的配置,此时spket已经有两种AJAX库的自动提示,通过右边的De ...

  2. 用javascript实现完全的类（private、pubulic等）

    js是面向对象的,但是其不像java一样完全的面向对象,但是利用其灵活性,我们可以使用它进行高度的模拟,来看下面的代码: function Student(name){ this.name=name; ...

  3. STM32开发指南-DMA

    DMA,直接存储器访问.传输数据时,外设通过DMA控制器直接访问内存,不经过cpu直接控制传输数据.不需要像中断处理方式需要保留和恢复现场的过程.通过硬件为内存和I/O设备开辟一条直接传送数据的通道, ...

  4. Ibatis 3.0 之前使用的都是2.0 3.0与2.0的内容有很大的不同

    以前用过ibatis2,但是听说ibatis3有较大的性能提升,而且设计也更合理,他不兼容ibatis2.尽管ibatis3还是beta10的状态,但还是打算直接使用ibatis3.0, ibatis ...

  5. 控制流之while

    while语句只要在一个条件为真的情况下,while语句允许你重复执行一块语句.while语句是所谓 循环 语句的一个例子.while语句有一个可选的else从句.使用while语句~~~~~~~~~ ...

  6. (简单) POJ 2251 Dungeon Master，BFS。

    Description You are trapped in a 3D dungeon and need to find the quickest way out! The dungeon is co ...

  7. ZOJ 3930 Dice Notation

    简单模拟题.一个int写成了char,搞了4个多小时.真垃圾.. #include<stdio.h> #include<string.h> +],s[+]; +]; +]; i ...

  8. CSS3样式linear-gradient的使用（切角效果）

    linear-gradient linear-gradient是CSS3中新增的样式,主要用于颜色的渐变效果.MDN地址 linear-gradient在不同内核下使用方式不同,详细内容可参考w3cp ...

  9. 冯如杯day1

    day1 今天尝试配置了seetaface工程 主要按照这个网址中提示的步骤配置seetaface 第一步安装并配置OpenCV 按照这个网址进行配置,结果遇到了这样的错误 无法启动此程序,因为计算机 ...

  10. 阿里开源Mysql分布式中间件：Cobar

    目前在从事数据库中间件的开发和维护工作,我们使用的数据库中间件就是由cobar改造而来,所以对于cobar的一些说明一看就明白了: 下面是看到的一个很不错的分析文档 这里整理了下方便自己学习使用. C ...