datatable 服务端分页

因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记

datatable 1.10.7 百度云下载  密码:0ea1

先上图【 jqueryui风格】

"bJQueryUI": false, //是否使用 jQury的UI theme 默认风格

查询效果

@{
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: rgb(238, 211, 210) !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": false, //是否使用 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': true,//关闭搜索
'bsearch': true, "aLengthMenu": [, , , , ],
"iDisplayLength": ,
"iDisplayStart": ,
'bAutoWidth': true,
"aoColumns": [
{ "data": "Id" },
{ "data": "Title" },
{ "data": "NewsContent" }, { "data": "DCount" },
{ "data": "Status" },
{ "data": null },
], "aoColumnDefs": [
{
"targets": [],
"searchable": false,
"render": function (data, type, row) {
if (data == )
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 DataTableParameter
{
/// <summary>
/// 1.0 DataTable用来生成的信息
/// </summary>
public string sEcho { get; set; } /// <summary>
/// 2.0分页起始索引
/// </summary>
public int iDisplayStart { get; set; } /// <summary>
/// 3.0每页显示的数量
/// </summary>
public int iDisplayLength { get; set; } /// <summary>
/// 4.0搜索字段
/// </summary>
public string sSearch { 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>
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; } }

临时新闻类

无连接数据库,通过for循环生成list数据集合,大小可以自己稍微调整

/// <summary>
/// 生成数据源
/// </summary>
/// <returns></returns>
public List<News> Getlist()
{
List<News> myLsit = new List<News>();
for (int i = ; i < ; i++)
{
if (i % == )
{
myLsit.Add(new News { Id = i, Title = "ceshi", NewsContent = "哈哈" + i, DCount = , Status = });
}
else
{
myLsit.Add(new News { Id = i, Title = "ceshi", NewsContent = "哈哈" + i, DCount = , Status = });
} }
return myLsit;
}

生成数据源

最后是控制器

 [HttpGet]
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.iDisplayStart;//开始页数
int pageSize = tp.iDisplayLength == - ? DataSource.Count : tp.iDisplayLength;//总页数
string search = tp.sSearch; //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
}

控制器

第一次写,如果有不明白的程序们,可以联系我:qq935299029,注明:博客园

asp.net mvc bootstrap datatable 服务端分页 更新槽糕的代码【1】的更多相关文章

  1. asp.net mvc bootstrap datatable 服务端分页

    datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 先上图[ jqueryui风格] 前端代码: @{ Layout = null;} <!DO ...

  2. ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

    引言: 本人想自己个博客网站出来,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之 ...

  3. BootStrap table服务端分页

    涉及到的内容: 1.bootstrap-table插件: 2.mybatisplus分页查询: 3.spring封装对象匹配bootstrap-table插件格式: 4.sql查询隐藏手机号中间四位. ...

  4. datatable.js 服务端分页+fixColumns列固定

    前言 记得还是15年的时候,工作需要,独自写后台管理系统..记得那时候,最让我头疼的不是后台逻辑,而是数据的列表展示. 列很多的时候,页面显示问题;分页样式问题;表格样式问题;数据加载...很多细节的 ...

  5. 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

    前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了S ...

  6. BootStrap Table和Mybatis Plus实现服务端分页

    一.后台java代码(Mybatis Plus分页) (1)Mybatis Plus分页的配置,在mybatis的xml文件中增加如下配置(Mybatis Plus官方文档:http://baomid ...

  7. ASP.NET MVC 使用dataTable(3)--更多选项参考

    ASP.NET MVC 使用dataTable(3)--更多选项参考 jQuery  dataTables 插件是一个优秀的表格插件,是后台工程师的福音!它提供了针对数据表格的排序.浏览器分页.服务器 ...

  8. jquery.dataTables的探索之路-服务端分页配置

    最近闲来无事想研究下数据表格,因为之前接触过layui和bootstrap的数据表格,本着能学多少学多少的学习态度,学习下dataTables的服务端分页配置.特与同学们一块分享下从中遇到的问题和解决 ...

  9. AJAX跨域调用ASP.NET MVC或者WebAPI服务

    关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案 作者:陈希章 时间:2014-7-3 问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP. ...

随机推荐

  1. C++02.访问控制

    1.class是struct的扩展,它包括数据成员和成员函数. 2.在C++中,有三种访问权限: (1)private:默认,只供类内部的函数使用. (2)public:类外的程序可以使用. (3)p ...

  2. 5.6 JS中基本包装类型

    为了便于操作基本类型值,ES还提供了三种特殊的引用类型,即(基本包装类型):Number,String,Boolean.这三种类型与前面介绍的引用类型相似,但同时也拥有基本数据类型的一些特性. 平时经 ...

  3. iOS开发--弹窗多选、单选框架

    最近刚毕业...因为个毕设,都离职了又得重新找工作了,这是之前自己没事开直播写的一个小框架,后来各种趋于稳定后,简单的封装了下,写了个小demo,这里就不废话了,直接贴地址,也不编辑了,自己复制过去看 ...

  4. MVC 5 中Filter控制 action的访问权限

    1,创建一个继承自 FilterAttribute, IActionFilter的类 namespace HeatMetering2.Filters { public class HMV2Authen ...

  5. SQLite学习笔记(十一)&&虚拟机原理

    前言      我们知道任何一种关系型数据库管理系统都支持SQL(Structured Query Language),相对于文件管理系统,用户不用关心数据在数据库内部如何存取,也不需要知道底层的存储 ...

  6. ERROR: Unable to globalize '/usr/local/NONE/etc/php-fpm.d/*.conf' 问题的解决

    今天继续作大死,趟php7的配置的坑. 照例,安装了昨天的各种扩展之后,解压php7的压缩文件到 /usr/local/. 然后开始配置config的扩展: ./configure --prefix= ...

  7. RedHat 和 Mirantis OpenStack 产品的版本和功能汇总和对比(持续更新)

    Mirantis 和 Red Hat 作为 OpenStack 商业化产品领域的两大领军企业,在行业内有重要的地位.因此,研究其产品版本发布周期和所支持的功能,对制定 OpenStack 产品的版本和 ...

  8. Azure上的几个坑

    此文用于记录在使用Azure中国版时遇到的一些“坑”. 1.虚拟机备份/还原 在某些场景中,使用备份/还原功能来创建(克隆)虚拟机比使用capture的image要方便很多.虚拟机备份后,执行还原操作 ...

  9. JSP动作元素——————理论篇

    JSP动作元素的组成及作用 JSP使用Action来控制Servlet引擎的行为,可重复使用JavaBean组件. 常用Action: jsp:param       在 jsp:include.js ...

  10. fopen函数和fread函数、fwrite函数

    fopen(打开文件) 相关函数 open,fclose 表头文件 #include<stdio.h> 定义函数 FILE * fopen(const char * path,const ...