[转]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条,结果应该是第一页的记录,但是实际显示的还是第五页的 ...
随机推荐
- FNDLOAD使用大全
FNDLOAD使用大全 Syntax FNDLOAD [username/password] 0 Y [mode] [configuration file] [target data file] ...
- Android-Kotlin-抽象类与多态的表现
选择包名,然后右键: 选择Class类型,会有class: 选择File类型,不会自动有class: 目录结构: 定义描述抽象类 Person人类: package cn.kotlin.kotlin ...
- ASP.NET MVC 使用Unity实现Ioc
为什么有这篇文章 最近在学ASP.NET MVC项目中使用Ioc,选用了Unity作为依赖注入的容器组件,在网上找了相关的文章简单实现了依赖注入,但想用文件配置的方式进行容器注入的注册,发现相关的文章 ...
- 【计算机网络】数据交换技术和多路复用技术的正（nao）确(can)打开方式
交换的作用 数据交换是计算机网络中两个终端进行数据传输的方式,它又可以分成两种类型:电路交换和分组交换.很显然,问题的核心在于“交换”,那么我们首先要思考的是:交换的作用是什么? “交换”的作 ...
- Android .9 图片
最初对 .9 图片不是十分理解,一些教程让人摸不到头脑. 最近重新研究终于明白了它的原理. 其实最重要的一点记住就可以了,就是 .9 图片的四条黑边的意义,每条黑边的意义都不一样: 顶部:在水平拉伸的 ...
- Flask系列06--(中间件)Flask的特殊装饰器 before_request,after_request, errorhandler
一.使用 Flask中的特殊装饰器(中间件)方法常用的有三个 @app.before_request # 在请求进入视图函数之前 @app.after_request # 在请求结束视图函数之后 响应 ...
- [Element-UI] 使用Element-UI的DateTimePicker组件报错:Cannot read property 'getHours' of undefined
使用Element-UI组件的DateTimePicker,如下: <template> <div class="block"> <span clas ...
- mybatis四大接口之 ResultSetHandler
1. 继承结构 2. ResultSetHandler public interface ResultSetHandler { // 将Statement执行后产生的结果集(可能有多个结果集)映射为结 ...
- Synchronzied与ReentrantLock
- iOS-xcconfig环境变量那些事（配置环境的配置）
前言 在配置宏定义参数时,会发现一个问题,在需要临时修改或者测试一些数据时,修改宏,如果不修改,就多写一个,注释掉原来的,然后测试后,再换回来,当然了,如果一两个宏,可以这样,但是,如果每次改的比较多 ...