asp.net mvc bootstrap datatable 服务端分页
datatable 服务端分页
因项目需求变动，需处理大量数据，更改成服务端分页，自己两天的学习笔记
先上图【 jqueryui风格】
前端代码：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Scripts/DataTables-1.10.7/css/select.dataTables.min.css" rel="stylesheet" />
<link href="~/Scripts/DataTables-1.10.7/css/jquery.dataTables.css" rel="stylesheet" />
<link href="~/Scripts/framework/plugins/jqueryui/lxwJQueryUI.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/framework/plugins/jqueryui/jquery-ui.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/DataTables-1.10.7/js/jquery.dataTables.js"></script>
<script src="~/Scripts/DataTables-1.10.7/js/dataTables.select.js"></script>
<style>
/*.selected {
background-color: #eed3d2 !important;
}*/
</style>
</head>
<body>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">查询</h3>
</div>
<div class="panel-body">
</div>
</div>
<div class="widget-content nopadding">
<table id="archivestable" class="table table-bordered data-table mydatatable ">
<thead>
<tr>
<th>编号</th>
<th>标题</th>
<th>内容</th>
<th>浏览量</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript">
$(function () {
var table;
table = $('#archivestable').dataTable({
"bJQueryUI": true, //是否使用 jQury的UI theme
"language": {
"sProcessing": "处理中...",
"sLengthMenu": "每页显示 _MENU_ 项",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "正在拼命加载...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
},
"deferRender": true
},
"bRetrieve": "true",
"responsive": "true",
"paging": "true",
"bServerSide": true, //:服务端处理分页后数据,客户端呈现,此时为true.但此时aoColumns要变,将'sName'换成mDataProp,同时自定义列也要有对应的数据
//"sServerMethod": "GET",//老版本提交方式
//"sAjaxSource": "/Home/GetNesList", //ajax Url地址
"ajax": {
"url": "/Home/GetNesList",
"type": "POST"
},
"bProcessing": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
'bFilter': false,//关闭搜索
'bsearch': false,
"aLengthMenu": [6, 8, 10, 20, 50],
"iDisplayLength": 8,
"iDisplayStart": 0,
'bAutoWidth': true,
"aoColumns": [
{ "data": "Id" },
{ "data": "Title" },
{ "data": "NewsContent" },
{ "data": "DCount" },
{ "data": "Status" },
{ "data": null },
],
"aoColumnDefs": [
{
"targets": [4],
"searchable": false,
"render": function (data, type, row) {
if (data == 0)
return '禁用';
else
return '可用';
}
}, {
sDefaultContent: '',
aTargets: ['_all']
}
]
});
////表格行点击设置选中样式
$("#archivestable tbody").on("click", "tr", function () {
var $curr = $(this);
if ($curr.hasClass("selected")) {
$curr.removeClass("selected");
}
else {
table.$("tr.selected").removeClass("selected");
$curr.addClass("selected");
}
});
});
</script>
</body>
</html>
后端：实体类
/// <summary>
/// 临时新闻类
/// </summary>
public class News
{
public int Id { get; set; }
public string Title { get; set; }
public string NewsContent { get; set; }
public int DCount { get; set; }
public int Status { get; set; }
}
/// <summary>
///分页类处理
/// </summary>
public class DataTableParameter
{
/// <summary>
/// 1.0 DataTable用来生成的信息
/// </summary>
public string sEcho { get; set; }
/// <summary>
/// 2.0分页起始索引
/// </summary>
public int Start { get; set; }
/// <summary>
/// 3.0每页显示的数量
/// </summary>
public int Length { get; set; }
/// <summary>
/// 4.0搜索字段
/// </summary>
public string search { get; set; }
/// <summary>
/// 5.0列数
/// </summary>
public int iColumns { get; set; }
/// <summary>
/// 6.0排序列的数量
/// </summary>
public int iSortingCols { get; set; }
/// <summary>
/// 7.0逗号分割所有的列
/// </summary>
public string sColumns { get; set; }
}
数据源：
/// <summary>
/// 生成数据源
/// </summary>
/// <returns></returns>
public List<News> Getlist()
{
List<News> myLsit = new List<News>();
for (int i = 0; i < 300; i++)
{
if (i % 2 == 0)
{
myLsit.Add(new News { Id = i, Title = "ceshi", NewsContent = "哈哈" + i, DCount = 20, Status = 0 });
}
else
{
myLsit.Add(new News { Id = i, Title = "ceshi", NewsContent = "哈哈" + i, DCount = 20, Status = 1 });
}
}
return myLsit;
}
//控制器代码
public JsonResult GetNesList(DataTableParameter tp)
{
#region
//1 获取数据源
List<News> DataSource = Getlist();
//DataSource = DataSource.OrderByDescending(a => a.SubTime).ToList();
//2 处理页数
string echo = tp.sEcho; //用于客户端自己的校验
int dataStart = tp.Start;//开始页数
int pageSize = tp.Length == -1 ? DataSource.Count : tp.Length;//总页数
string search = tp.search;
//3 是否有搜索框条件，【因为版本问题，暂时没有实现】
if (!String.IsNullOrEmpty(search))
{
var data = DataSource.Where(a => a.Title.Contains(search) ||
a.NewsContent.Contains(search))
.Skip<News>(dataStart)
.Take(pageSize)
.ToList();
return Json(new
{
sEcho = echo,
iTotalRecords = DataSource.Count(),
iTotalDisplayRecords = DataSource.Count(),
aaData = data
}, JsonRequestBehavior.AllowGet);
}
else
{
var data = DataSource.Skip<News>(dataStart)
.Take(pageSize)
.ToList();
return Json(new
{
sEcho = echo,
iTotalRecords = DataSource.Count(),
iTotalDisplayRecords = DataSource.Count(),
aaData = data
}, JsonRequestBehavior.AllowGet);
}
#endregion
}
第一次写，代码很糟糕
asp.net mvc bootstrap datatable 服务端分页的更多相关文章
- asp.net mvc bootstrap datatable 服务端分页 更新槽糕的代码【1】
datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 datatable 1.10.7 百度云下载 密码:0ea1 先上图[ jqueryui风格] ...
- ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项
引言: 本人想自己个博客网站出来,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之 ...
- BootStrap table服务端分页
涉及到的内容: 1.bootstrap-table插件: 2.mybatisplus分页查询: 3.spring封装对象匹配bootstrap-table插件格式: 4.sql查询隐藏手机号中间四位. ...
- datatable.js 服务端分页+fixColumns列固定
前言 记得还是15年的时候,工作需要,独自写后台管理系统..记得那时候,最让我头疼的不是后台逻辑,而是数据的列表展示. 列很多的时候,页面显示问题;分页样式问题;表格样式问题;数据加载...很多细节的 ...
- 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了S ...
- BootStrap Table和Mybatis Plus实现服务端分页
一.后台java代码(Mybatis Plus分页) (1)Mybatis Plus分页的配置,在mybatis的xml文件中增加如下配置(Mybatis Plus官方文档:http://baomid ...
- ASP.NET MVC 使用dataTable（3）--更多选项参考
ASP.NET MVC 使用dataTable(3)--更多选项参考 jQuery dataTables 插件是一个优秀的表格插件,是后台工程师的福音!它提供了针对数据表格的排序.浏览器分页.服务器 ...
- jquery.dataTables的探索之路-服务端分页配置
最近闲来无事想研究下数据表格,因为之前接触过layui和bootstrap的数据表格,本着能学多少学多少的学习态度,学习下dataTables的服务端分页配置.特与同学们一块分享下从中遇到的问题和解决 ...
- AJAX跨域调用ASP.NET MVC或者WebAPI服务
关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案 作者:陈希章 时间:2014-7-3 问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP. ...
随机推荐
- android Content Provider介绍
ContentProvider(内容提供者)是Android中的四大组件之一.主要用于对外共享数据,也就是通过ContentProvider把应用中的数据共享给其他应用访问,其他应用可以通过Conte ...
- android 帧动画
首先在res/drawable/name1.xml/定义一组图片集合: <?xml version="1.0" encoding="utf-8"?> ...
- Mac下安装Matlab R2015b
步骤 下载Matlab R2015b链接:http://pan.baidu.com/s/1pLGpUfp 密码:k1xg 下载破解文件r2015b_crackhttp://download.csdn. ...
- 基于ARM处理器的反汇编器软件简单设计及实现
写在前面 2012年写的毕业设计,仅供参考 反汇编的目的 缺乏某些必要的说明资料的情况下, 想获得某些软件系统的源代码.设计思想及理念, 以便复制, 改造.移植和发展: 从源码上对软件的可靠性和安全性 ...
- MySQL可视化软件Work Bench导出导入数据库
首先打开你的work bench,输入你的密码进入主页面 A:导入数据库 在Schemas空白处右键选择Create~:建立一个数据库,然后就可以导入你的sql文件了 File-->Open S ...
- C#语言基础
第一部分 了解C# C#是微软公司在2000年7月发布的一种全新且简单.安全.面向对象的程序设计语言,是专门为.NET的应用而开发的.体现了当今最新的程序设计技术的功能和精华..NET框架为C#提供了 ...
- Quartz2.0以上版本的单机和集群
(一)Quartz单机 1.Quartz简介 Quartz是一个完全由java编写的开源作业调度框架,能实现业务的定时调度.Quartz主要有三个核心调度器.任务和触发器: ①任务-JobDetail ...
- WPF 自定义标题栏 自定义菜单栏
自定义标题栏 自定义列表,可以直接修改WPF中的ListBox模板,也用这样类似的效果.但是ListBox是不能设置默认选中状态的. 而我们需要一些复杂的UI效果,还是直接自定义控件来的快 GitHu ...
- 如何利用报表工具FineReport实现报表列的动态展示
相信动态列的实现困扰了很多人,大数据量,多字段的加载将会非常耗时,数据又做不到真正的动态灵活.现有的方式都是通过变向的隐藏等方式来实现. 那该如何解决呢?这里分享帆软报表设计器FineReport的实 ...
- JQuery 滚动轮播
css: *{margin: 0;padding: 0;}body{font-size: 12px;line-height: 24px;text-algin: center; }a{color: #f ...