首页 > > 网络编程 > Asp.Net编程 >

Bootstrap table 分页 In asp.net MVC

2018-06-22 06:15:20来源：未知阅读 ()

中文翻译文档：

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>

View Code

二、处理脚本

  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> &nbsp;";
 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>&nbsp;";
 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 };

View Code

三、后端处理

 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