中文翻译文档：
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.初始化Table34 ????????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": 0103 ????????????};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,rowsBootstrap table 分页 In asp.net MVC
原文地址：http://www.cnblogs.com/lenovo_tiger_love/p/7474403.html