[转]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条,结果应该是第一页的记录,但是实际显示的还是第五页的 ...
随机推荐
- 6.python3爬虫之urllib库
# 导入urllib.request import urllib.request # 向指定的url发送请求,并返回服务器响应的类文件对象 response = urllib.request.urlo ...
- spring mvc 的请求流程
SpringMVC核心处理流程: 1.DispatcherServlet前端控制器接收发过来的请求,交给HandlerMapping处理器映射器 2.HandlerMapping处理器映射器,根据请求 ...
- Spring Security Hello World Example--reference
In this tutorial, we will see how we can use Spring security to protect specific resources. This Hel ...
- C#为什么不能像C/C++一样的支持函数只读传参
C#为什么不能像C/C++一样的支持函数只读传参? 这个问题其实问的人挺多的,我自己也经常想实现这个功能,但是发现总是那么的不尽人意. 有些人倒是给出了一下答案,但是都不能很好的解决像C/C++一样的 ...
- JSON Web Token in ASP.NET Web API 2 using Owin
In the previous post Decouple OWIN Authorization Server from Resource Server we saw how we can separ ...
- 【Java基础】反射和注解
前言 在Java中,反射机制和注解机制一直是一个很重要的概念,那么他们其中的原理是怎么样呢,我们不仅仅需要会使用,更要知其然而之所以然. 目录 反射机制 反射如何使用 注解定义 注解机制原理 注解如何 ...
- [宁波集训]0827Day1
1.\(CF771D\ Bear\ and\ Company\)(原题,比赛时改为多组数据) 一道毒瘤\(dp\)题,\(dp[i][j][k][0/1]\)表示有\(i\)个\(V\),有\(j\) ...
- 16_python_面向对象
一.面向对象和面向过程的区别 1.面向对象:一切以对象为中心.有相同属性和动作的结合体叫做对 优点:易维护.易复用.易扩展,由于面向对象有封装.继承.多态性的特性 ...
- ReactNatvie遇到的错误
1:新版的React包中没有包含PropTypes,如果使用需要从‘prop-types’包中导入. 2: 'prop-types'包中直接定义‘PropTypes.style’是无效的,需要使用‘P ...
- 【翻译】 Windows 内核漏洞学习—空指针解引用
Windows Kernel Exploitation – NullPointer Dereference 原文地址:https://osandamalith.com/2017/06/22/windo ...