Bootstrap table 分页 In asp.net MVC
中文翻译文档：
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
