本文转自：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
一、视图页
![[转]Bootstrap table 分页 In asp.net MVC](https://image.shishitao.com:8440/aHR0cDovL2Jic21heC5pa2FmYW4uY29tL3N0YXRpYy9MM0J5YjNoNUwyaDBkSEJ6TDJOdmJXMXZiaTVqYm1Kc2IyZHpMbU52YlM5cGJXRm5aWE12WTI5d2VXTnZaR1V1WjJsbS5qcGc%3D.jpg?w=700&webp=1 "[转]Bootstrap table 分页 In asp.net MVC")
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
[转]Bootstrap table 分页 In asp.net MVC的更多相关文章
-
Bootstrap table 分页 In asp.net MVC
中文翻译文档: http://blog.csdn.net/rickiyeat/article/details/56483577 版本说明: Jquery v2.1.1 Bootstrap V3.3.7 ...
-
Bootstrap table分页问题汇总
首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务 ...
-
bootstrap table分页（前后端两种方式实现）
bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...
-
MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)
该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...
-
LayUI分页基于ASP.NET MVC
---恢复内容开始--- 今天写了挺久的分页,百度了很多都没有很好的.Net实例,今天我来更新一期关于layuiTable分页 首先你得理解layui的官方文档的Table分页部分,我在这里附上地址 ...
-
bootstrap table 分页序号递增问题 （转）
原文地址:https://segmentfault.com/q/1010000011040346 如题,怎么在bootstrap table中显示序号,序号递增,并且分页有效,等于是每页10条,第2页 ...
-
bootstrap table分页，重新数据查询时页码为当前页问题
问题描述: 使用bootstrap table时遇到一个小问题,第一次查询数据未5页,翻页到第5页后,选中条件再次查询数据时,传到后端页码仍旧为5,而此时数据量小于5页,表格显示为未查询到数据. 处理 ...
-
bootstrap table分页limit计算pageIndex和pageSize
由于bootstrap table的js无法直接获取pageSize和pageIndex的值,只能通过limit进行计算.
-
bootstrap table 分页后,重新搜索的问题
前提: 自定义搜索且有分页功能,比如搜索产品名的功能. 现象:当搜索充气娃娃的时候返回100条记录,翻到第五页. 这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的 ...
随机推荐
-
Java中的反射机制
Java反射机制 反射机制定义 反射机制是Java语言中一个非常重要的特性,它允许程序在运行时进行自我检查,同时也允许其对内部成员进行操作.由于反射机制能够实现在运行时对类进行装载,因此能够增加程序的 ...
-
BST &; Treap
二叉查找树递归定义: 二叉查找树是空树或不是空树二叉查找树的左二叉查找树的值一定小于二叉查找树的值或左二叉查找树为空树二叉查找树的右二叉查找树的值一定大于二叉查找树的值或右二叉查找树为空树 不维护父亲 ...
-
Bootstrap table 元素列内容超长自动折行显示方法?
共需要四步: 1.在table元素的父容器div加上:class="table-responsive" 3.设置表头th的width:<th width="20%& ...
-
RHEL6误安装RHEL7的包导致glibc被升级后系统崩溃处理方法
RHEL6误使用了RHEL7的光盘源,安装了某个RPM包之后,导致glibc被升级,进而导致系统崩溃. [root@rhel65 ~]# yum install ftp Loaded plugin ...
-
Document APIs
本节首先简要介绍Elasticsearch的数据复制模型,然后详细描述以下CRUD API: Single document APIs Index API Get API Delete API Upd ...
-
【学习笔记】非监督学习-k-means
目录 k-means k-means API k-means对Instacart Market用户聚类 Kmeans性能评估指标 Kmeans性能评估指标API Kmeans总结 无监督学习,顾名思义 ...
-
Mac 下安装Fiddler抓包工具
需求 我们都知道在Mac电脑下面有一个非常好的抓包工具:Charles.但是这个只能抓代理的数据包.但是有时候想要调试本地网卡的数据库 Charles 就没办法了.就想到了在windows下面的一个F ...
-
如何实现从Java入门到服务端项目开发的进阶?
对于打算入门或者刚刚入门学习Java的人来说,刚开始接触这门学科,往往会觉得不知所措,也会觉得很迷茫.结合前人经验,就从入门到进阶对于Java的学习而言,应该对于学习时间.目标和内容规划有一个清晰的定 ...
-
PG数据库基本命令——查询（笔记）
1.插入数据(insert 语句) 语法: INSERT INTO TABLE_NAME (column1, column2, column3,...columnN) VALUES (value1, ...
-
odoo开发笔记 -- 字段增加唯一约束
前台违反约束效果: 后台模型中定义代码: name = fields.Char(string="Name", copy=False) # 流水号 _sql_constraints ...