[转]Bootstrap table 分页 In asp.net MVC
本文转自：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
[转]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条,结果应该是第一页的记录,但是实际显示的还是第五页的 ...
随机推荐
- Python自动化开发 - Django【进阶篇】
Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行 ...
- 10.scrapy入门
Scrapy 框架 Scrapy是用纯Python实现一个为了爬取网站数据.提取结构性数据而编写的应用框架,用途非常广泛. 框架的力量,用户只需要定制开发几个模块就可以轻松的实现一个爬虫,用来抓取网页 ...
- node-webkit学习(4)Native UI API 之window
node-webkit学习(4)Native UI API 之window 文/玄魂 目录 node-webkit学习(4)Native UI API 之window 前言 4.1 window a ...
- 实验1 单片机IO口应用及数码管显示
1． 单片机驱动蜂鸣器的实验: a) 说明:Lab51单片机实验板的蜂鸣器连接到单片机的P1.5 b) 基本要求:控制蜂鸣器每2秒响0.5秒. #include &l ...
- Windows核心编程：第2章 字符和字符串处理
Github https://github.com/gongluck/Windows-Core-Program.git //第2章 字符和字符串处理.cpp: 定义应用程序的入口点. // #incl ...
- ASP.Net Core 2.2 MVC入门到基本使用系列 (二)
本教程会对基本的.Net Core 进行一个大概的且不会太深入的讲解, 在您看完本系列之后, 能基本甚至熟练的使用.Net Core进行Web开发, 感受到.Net Core的魅力. 本教程知识点大体 ...
- SignalR简介
什么是SignalR? ASP.NET SignalR是ASP.NET开发人员的库,它简化了向应用程序添加实时Web功能的过程.实时Web功能是指服务器代码在连接的客户端可用时立即将内容推送到连接的客 ...
- Entity Framework 6 多对多增改操作指南
问题描述 在很多系统中,存在多对多关系的维护.如下图: 这种多对多结构在数据库中大部分有三个数据表,其中两个主表,还有一个关联表,关联表至少两个字段,即左表主键.右表主键. 如上图,其中的Suppli ...
- Python 爬虫(二十五) Cookie的处理--cookielib库的使用
Python中cookielib库(python3中为http.cookiejar)为存储和管理cookie提供客户端支持. 该模块主要功能是提供可存储cookie的对象.使用此模块捕获cookie并 ...
- Python小白学习之路（二十四）—【装饰器】
装饰器 一.装饰器的本质 装饰器的本质就是函数,功能就是为其他函数添加附加功能. 利用装饰器给其他函数添加附加功能时的原则: 1.不能修改被修饰函数的源代码 2.不能修改被修饰函数的调用 ...