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