本文转自：https://www.cnblogs.com/lenovo_tiger_love/p/7474403.html
中文翻译文档：
http://blog.csdn.net/rickiyeat/article/details/56483577
版本说明：
Jquery v2.1.1
Bootstrap V3.3.7
bootstrap-table V1.11.1
一、视图页
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>测试</title>
6 <link href="/Content/bootstrap.min.css" rel="stylesheet">
7 <link href="/Content/bootstrap-table.min.css" rel="stylesheet">
8 <script src="/Scripts/modernizr-2.8.3.js"></script>
9 </head>
10 <body>
11 <div class="container">
12 <div class="row">
13 <div id="test_toolbar" class="btn-group">
14 <button id="btnEdit" type="button" class="btn btn-default">
15 <span class="fa fa-pencil-square-o" aria-hidden="true"></span>批量显示
16 </button>
17 <button id="btnDelete" type="button" class="btn btn-default">
18 <span class="fa fa-trash-o" aria-hidden="true"></span>批量删除
19 </button>
20 </div>
21 <table id="test_Table" class="table-striped table-hover" data-reorderable-columns="true"></table>
22 </div>
23 </div>
24 <script src="/Scripts/jquery/jquery-2.1.1.min.js"></script>
25 <script src="/Scripts/bootstrap.min.js"></script>
26 <script src="/Scripts/respond.min.js"></script>
27 <script src="/Scripts/bootstrap-table.min.js"></script>
28 <script src="/Scripts/bootstrap-table-zh-CN.js"></script>
29 <script src="~/Scripts/js/Activity/Comment.js"></script>
30 <script>
31 $(function () {
32
33 //1.初始化Table
34 var oTable = new TableInit();
35 oTable.Init();
36
37 //2.初始化Button的点击事件
38 var oButtonInit = new ButtonInit();
39 oButtonInit.Init();
40
41 });
42 </script>
43 </body>
44 </html>
二、处理脚本
1 var TableInit = function () {
2 var oTableInit = new Object();
3
4 //初始化Table
5 oTableInit.Init = function () {
6 $('#test_Table').bootstrapTable({
7 url: "test",
8 method: 'get',
9 datatype: 'json',
10 contentType: "application/x-www-form-urlencoded",
11 toolbar: '#test_toolbar',
12 striped: false, //是否显示行间隔色
13 cache: false,
14 pagination: true,
15 sortable: false,
16 sortName: 'AddDate',
17 sortOrder: "asc",
18 queryParams: oTableInit.queryParams,
19 sidePagination: "server",
20 pageNumber: 1,
21 pageSize: 20,
22 pageList: [20, 30, 50, 100],
23 paginationPreText: '上一页',
24 paginationNextText: '下一页',
25 search: false,
26 strictSearch: false,
27 showColumns: false,
28 showRefresh: true,
29 minimumCountColumns: 2,
30 clickToSelect: true,//单击行选中
31 height: 600,
32 idField: "Id",
33 uniqueId: "Id", //唯一标识列
34 showToggle: false,
35 cardView: false,
36 detailView: false,
37 showHeader: true,
38 singleSelect: false,//是否单选
39 checkboxHeader: true,
40 columns: [
41 { checkbox: true },
42 {
43 title: '序号', field: 'No', width: '50', align: 'center', formatter: function (value, row, index) {
44 return index + 1;
45 }
46 },
47 { field: 'Id', title: 'Id', visible: false },
48 {
49 field: 'Operate',
50 title: '操作',
51 width: '100',
52 halign: 'center',
53 align: 'center',
54 formatter: function (value, row, index) {
55 var strHtml = "<a title='编辑' onclick='btnEdit(\"" + row.Id + "\")' href='javascript:void(0);'><i class='fa fa-pencil fa-fw'></i></a> ";
56 strHtml += "<a title='删除' onclick='btnDelete(\"" + row.Id + "\")' href='javascript:void(0);'><i class='fa fa-trash-o'></i></a>";
57 return strHtml;
58 }
59 },//或者
60 {
61 field: 'Operate', title: '操作', width: '80', halign: 'center', align: 'left',
62 events: operateEvents,
63 formatter: function (value, row, index) {
64 var strHtml = "<a class='upload' title='上传' href='javascript:void(0);'><i class='fa fa-upload fa-fw'></i></a> ";
65 strHtml += "<a class='remove' title='删除' href='javascript:void(0);'><i class='fa fa-trash-o fa-fw'></i></a>";
66 return strHtml;
67 }
68 }
69 ]
70 });
71 };
72
73 //传递后台的参数
74 oTableInit.queryParams = function (params) {
75 //参数对应表格参数
76 /* 方式一 var temp1 = {
77 rows: this.pageSize,
78 page: this.pageNumber,
79 sort: this.sortName,
80 order: this.sortOrder
81 };*/
82
83 //序列化表单数据
84 var searchWhere = $("#activity_SearchForm").serializeFormToJson();
85 //方式二
86 var temp = {
87 limit: params.limit, //页面大小
88 offset: params.offset / params.limit, //页码
89 searchWhere: JSON.stringify(searchWhere)//JSON字符串参数
90 };
91 return temp;
92 };
93 oTableInit.responseHandler = function (res) {
94 if (res) {
95 return {
96 "rows": res.result,
97 "total": res.totalCount
98 };
99 } else {
100 return {
101 "rows": [],
102 "total": 0
103 };
104 }
105 };
106 return oTableInit;
107 };
108
109 var ButtonInit = function () {
110 var oInit = new Object();
111
112 oInit.Init = function () {
113
114 //清空查询条件
115 $("#btnClear").click(function () {
116 //...
117 });
118
119 //查询
120 $("#btnSearch").click(function () {
121 $("#test_Table").bootstrapTable('refresh');
122 });
123
124 //批量显示
125 $("#btnEdit").click(function () {
126 var selectRow = $("#test_Table").bootstrapTable('getSelections');
127 if (selectRow.length <= 0) {
128 $.modalAlert("请先选中要操作的数据行。", "warning");
129 }
130
131 var ids = new Array();
132 $.each(selectRow, function (i, row) {
133 ids[i] = row["Id"];
134 });
135
136 $.confirmForm({
137 //...
138 });
139 });
140
141 //批量删除
142 $("#btnDelete").click(function () {
143 var selectRow = $("#test_Table").bootstrapTable('getSelections');
144 if (selectRow.length <= 0) {
145 $.modalAlert("请先选中要操作的数据行。", "warning");
146 }
147
148 var ids = new Array();
149 $.each(selectRow, function (i, row) {
150 ids[i] = row["Id"];
151 });
152
153 $.deleteForm({
154 //...
155 });
156 });
157 };
158 return oInit;
159 };
160
161 //编辑
162 var btnEdit = function (key) {
163 //...
164 }
165
166 //删除
167 var btnDelete = function (key) {
168 //...
169 }
170
171 //行事件或采用以下方式
172
173 //操作监听事件
174 window.operateEvents = {
175 //删除数据行
176 'click .remove': function (e, value, row, index) {
177 $('#test_Table').bootstrapTable('remove', { field: 'Id', values: [row['Id']] });
178 },
179 //上传
180 'click .upload': function (e, value, row, index) {
181 //...
182 }
183 };
三、后端处理
1 /// <summary>
2 /// test
3 /// </summary>
4 /// <param name="limit">页数据大小</param>
5 /// <param name="offset">页码</param>
6 /// <param name="searchWhere"></param>
7 /// <returns></returns>
8 [HttpGet]
9 [AjaxOnly]
10 public JsonResult GetCommentGridJson(int limit, int offset, string searchWhere)
11 {
12 //总数
13 int rowCount = 0;
14 IList<T> list = null;
15 return Json(new { total = rowCount, rows = list });
16 }
17
18 //返回JSON必须包含total,rows