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. 如何用代码读取Office Online Server2016的文档的备注信息

    前言 在一个项目上客户要求读取office online server 2016的对文档的备注信息,如下图: 以前思路老纠结在OOS这个在线上,总有以为这个信息存储在某个列表中,其实错了,这个备注信息 ...

  2. RadioButton与CheckBox

    笔者长期从事于数据库的开发,算了,不提当年了,因为一直用的是小语种(PowerBuilder),还是来说说这两个最常见的控件吧! RadioButton(单选)和CheckBox(多选) 先来看看继承 ...

  3. swift-字符和字符串

    OC定义字符: char charValue = 'a'; swift定义字符: var charValue : Character = "a" Unicode 国际标准的文本编码 ...

  4. Linux－学习前言

    本随笔会持续,不定期更新.我有上网找与Linux相关的博客,发现很多人只写了几篇就没更新了,没有坚持下来!希望我能keep  on. 最近一个月是考试月,可能更新会比较少.

  5. HDFS的架构

    主从结构 主节点,只有一个: namenode 从节点,有很多个: datanodes 在版本1中,主节点只有一个,在 版本2中主节点有两个. namenode 负责(管理): 接收用户操作请求 维护 ...

  6. Dojo: Quick Start

      1.Dojo学习地址 2.Dojo快速开始 2.1.Dojo引入 2.2.指定Dojo模块的位置 2.3.模块加载require 3.查找Dom节点 3.1.根据id查找dom节点 3.2.根据c ...

  7. 2.sort 排序命令讲解

    sort命令  sort:文本排序,仅仅是对显示文件的排序,而不影响源文件的顺序,是根据ASSII码     的字符升序来排列的.        -n:安装数值大小从小到大排列 ,默认是升序.     ...

  8. 错误: “WebForm_DoPostBackWithOptions”未定义

    无论是ASP.NET WebForm 还是 ASP.NET MVC项目,在本地程序测试没问题,但是部署在IIS上访问就会出现  错误: “WebForm_DoPostBackWithOptions”未 ...

  9. java nio系列文章

    java nio系列教程 基于NIO的Client/Server程序实践 (推荐) java nio与并发编程相关电子书籍   (访问密码 48dd) 理解NIO nio学习记录 图解ByteBuff ...

  10. [No0000A3]护眼谎言大揭秘，选择正确的方式保护眼睛！

    当眼睛因为过度劳累而状况频出的时候,许多人没有选择极目远眺.眼保健操.充分睡眠等简单易行的养眼方式,而是求助于各种护眼工具.于是,在视疲劳成为常见眼病之后,护眼市场产品层出不穷:护眼灯.眼贴.眼保仪. ...