Bootstrap table 分页 In asp.net MVC
中文翻译文档：
http://blog.csdn.net/rickiyeat/article/details/56483577
版本说明：
Jquery v2.1.1
Bootstrap V3.3.7
bootstrap-table V1.11.1
一、视图页
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<link href="/Content/bootstrap.min.css" rel="stylesheet">
<link href="/Content/bootstrap-table.min.css" rel="stylesheet">
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div id="test_toolbar" class="btn-group">
<button id="btnEdit" type="button" class="btn btn-default">
<span class="fa fa-pencil-square-o" aria-hidden="true"></span>批量显示
</button>
<button id="btnDelete" type="button" class="btn btn-default">
<span class="fa fa-trash-o" aria-hidden="true"></span>批量删除
</button>
</div>
<table id="test_Table" class="table-striped table-hover" data-reorderable-columns="true"></table>
</div>
</div>
<script src="/Scripts/jquery/jquery-2.1.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/respond.min.js"></script>
<script src="/Scripts/bootstrap-table.min.js"></script>
<script src="/Scripts/bootstrap-table-zh-CN.js"></script>
<script src="~/Scripts/js/Activity/Comment.js"></script>
<script>
$(function () { //1.初始化Table
var oTable = new TableInit();
oTable.Init(); //2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init(); });
</script>
</body>
</html>
二、处理脚本
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#test_Table').bootstrapTable({
url: "test",
method: 'get',
datatype: 'json',
contentType: "application/x-www-form-urlencoded",
toolbar: '#test_toolbar',
striped: false, //是否显示行间隔色
cache: false,
pagination: true,
sortable: false,
sortName: 'AddDate',
sortOrder: "asc",
queryParams: oTableInit.queryParams,
sidePagination: "server",
pageNumber: 1,
pageSize: 20,
pageList: [20, 30, 50, 100],
paginationPreText: '上一页',
paginationNextText: '下一页',
search: false,
strictSearch: false,
showColumns: false,
showRefresh: true,
minimumCountColumns: 2,
clickToSelect: true,//单击行选中
height: 600,
idField: "Id",
uniqueId: "Id", //唯一标识列
showToggle: false,
cardView: false,
detailView: false,
showHeader: true,
singleSelect: false,//是否单选
checkboxHeader: true,
columns: [
{ checkbox: true },
{
title: '序号', field: 'No', width: '50', align: 'center', formatter: function (value, row, index) {
return index + 1;
}
},
{ field: 'Id', title: 'Id', visible: false },
{
field: 'Operate',
title: '操作',
width: '100',
halign: 'center',
align: 'center',
formatter: function (value, row, index) {
var strHtml = "<a title='编辑' onclick='btnEdit(\"" + row.Id + "\")' href='javascript:void(0);'><i class='fa fa-pencil fa-fw'></i></a> ";
strHtml += "<a title='删除' onclick='btnDelete(\"" + row.Id + "\")' href='javascript:void(0);'><i class='fa fa-trash-o'></i></a>";
return strHtml;
}
},//或者
{
field: 'Operate', title: '操作', width: '80', halign: 'center', align: 'left',
events: operateEvents,
formatter: function (value, row, index) {
var strHtml = "<a class='upload' title='上传' href='javascript:void(0);'><i class='fa fa-upload fa-fw'></i></a> ";
strHtml += "<a class='remove' title='删除' href='javascript:void(0);'><i class='fa fa-trash-o fa-fw'></i></a>";
return strHtml;
}
}
]
});
};
//传递后台的参数
oTableInit.queryParams = function (params) {
//参数对应表格参数
/* 方式一 var temp1 = {
rows: this.pageSize,
page: this.pageNumber,
sort: this.sortName,
order: this.sortOrder
};*/
//序列化表单数据
var searchWhere = $("#activity_SearchForm").serializeFormToJson();
//方式二
var temp = {
limit: params.limit, //页面大小
offset: params.offset / params.limit, //页码
searchWhere: JSON.stringify(searchWhere)//JSON字符串参数
};
return temp;
};
oTableInit.responseHandler = function (res) {
if (res) {
return {
"rows": res.result,
"total": res.totalCount
};
} else {
return {
"rows": [],
"total": 0
};
}
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
oInit.Init = function () {
//清空查询条件
$("#btnClear").click(function () {
//...
});
//查询
$("#btnSearch").click(function () {
$("#test_Table").bootstrapTable('refresh');
});
//批量显示
$("#btnEdit").click(function () {
var selectRow = $("#test_Table").bootstrapTable('getSelections');
if (selectRow.length <= 0) {
$.modalAlert("请先选中要操作的数据行。", "warning");
}
var ids = new Array();
$.each(selectRow, function (i, row) {
ids[i] = row["Id"];
});
$.confirmForm({
//...
});
});
//批量删除
$("#btnDelete").click(function () {
var selectRow = $("#test_Table").bootstrapTable('getSelections');
if (selectRow.length <= 0) {
$.modalAlert("请先选中要操作的数据行。", "warning");
}
var ids = new Array();
$.each(selectRow, function (i, row) {
ids[i] = row["Id"];
});
$.deleteForm({
//...
});
});
};
return oInit;
};
//编辑
var btnEdit = function (key) {
//...
}
//删除
var btnDelete = function (key) {
//...
}
//行事件或采用以下方式
//操作监听事件
window.operateEvents = {
//删除数据行
'click .remove': function (e, value, row, index) {
$('#test_Table').bootstrapTable('remove', { field: 'Id', values: [row['Id']] });
},
//上传
'click .upload': function (e, value, row, index) {
//...
}
};
三、后端处理
/// <summary>
/// test
/// </summary>
/// <param name="limit">页数据大小</param>
/// <param name="offset">页码</param>
/// <param name="searchWhere"></param>
/// <returns></returns>
[HttpGet]
[AjaxOnly]
public JsonResult GetCommentGridJson(int limit, int offset, string searchWhere)
{
//总数
int rowCount = ;
IList<T> list = null;
return Json(new { total = rowCount, rows = list });
} //返回JSON必须包含total,rows
Bootstrap table 分页 In asp.net MVC的更多相关文章
- [转]Bootstrap table 分页 In asp.net MVC
本文转自:https://www.cnblogs.com/lenovo_tiger_love/p/7474403.html 中文翻译文档: http://blog.csdn.net/rickiyeat ...
- 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条,结果应该是第一页的记录,但是实际显示的还是第五页的 ...
随机推荐
- Android UI（三）SlidingMenu实现滑动菜单（详细 官方）
Jeff Lee blog: http://www.cnblogs.com/Alandre/ (泥沙砖瓦浆木匠),retain the url when reproduced ! Thanks ...
- 【原创】STM32下波特率计算详解
波特率的计算 STM32下的波特率和串口外设时钟息息相关,USART 1的时钟来源于APB2,USART 2-5的时钟来源于APB1.在STM32中,有个波特率寄存器USART_BRR,如下: ...
- 读写锁ReentrantReadWriteLock：读读共享，读写互斥，写写互斥
介绍 DK1.5之后,提供了读写锁ReentrantReadWriteLock,读写锁维护了一对锁:一个读锁,一个写锁.通过分离读锁和写锁,使得并发性相比一般的排他锁有了很大提升.在读多写少的情况下, ...
- Mysql加锁过程详解（4）-select for update/lock in share mode 对事务并发性影响
Mysql加锁过程详解(1)-基本知识 Mysql加锁过程详解(2)-关于mysql 幻读理解 Mysql加锁过程详解(3)-关于mysql 幻读理解 Mysql加锁过程详解(4)-select fo ...
- jquery调用javascript方法
本来想找个“优雅”一点的方法,类似C#在调用C++方法时候的Invoke之类的.没找到,后来想想,其实也没必要,直接写就好了,算最优雅了吧.只是少了VS的Intelligence,有点不习惯罢了. 事 ...
- PyInstaller 打包 python程序成exe
pychaim下PyInstaller 打包 python程序 主题是使用PyInstaller 打包python时遇到一些问题以及解决方案,其中将要打包的程序是用tensorflow做的LSTM算法 ...
- 解读经典《C#高级编程》第七版 Page45-50.核心C#.Chapter2
前言 本篇讲述枚举和名称空间. 01 枚举 首先需要明确枚举的概念:枚举是用户定义的整数类型.使用枚举的目标是,使用一组容易记忆的名称,来使得代码更容易编写和维护. 我们对比枚举的定义和类的定义,会发 ...
- 利用http协议对搜索引擎劫持
主要是利用了http协议的refereer头 另外一个头user-agnet 主要是用来做流量劫持 referer 头告诉服务器用户从哪里找来的 当用户通过搜索引擎打开网站时会出现源网页 refere ...
- 推荐 3 篇关于 java8 Lambda表达式的文章
State of the Lambda 这篇主要讲 Labmbda 的背景和用法 译文:深入理解Java 8 Lambda(语言篇--lambda,方法引用,目标类型和默认方法) State of t ...
- js如何发送wss协议的请求，以及接受服务器返回的数据
今天遇到问题,以往都是请求http协议的url,现在请求变成了wss的,用以前那种ajax的方式不可以发送和接受.然后查阅相关资料解决了这个问题,在这记录一下解决办法,使用的是websocket. & ...