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. 【原】EasyUI ComboGrid 集成分页、按键示例

    需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下键在表格中移动选择行数据: 4.可以使用回车键在表格中选中行数据: 5.在下拉框的文本框中输入内容,能查询表格: 6. ...

  2. View and Data API Tips : Conversion between DbId and node

    By Daniel Du In View and Data client side API, The assets in the Autodesk Viewer have an object tree ...

  3. iOS字体加载三种方式

    静态加载 动态加载 动态下载苹果提供的多种字体 其他 打印出当前所有可用的字体 检查某字体是否已经下载 这是一篇很简短的文章,介绍了 iOS 自定义字体加载的三种方式. 静态加载 这个可以说是最简单最 ...

  4. 使用gulp解决RequireJS项目前端缓存问题（一）

    1.前言 前端缓存一直是个令人头疼的问题,你有可能见过下面博客园首页的资源文件链接: 有没有发现文件名后面有一串不规则的东东,没错,这就是运用缓存机制,我们今天研究的就是这种东西. 先堵为快,猛戳链接 ...

  5. SQLServer中Partition By 函数的使用

    今天群里看到一个问题,在这里概述下:查询出不同分类下的最新记录.一看这不是很简单的么,要分类那就用Group By;要最新记录就用Order By呗.然后在自己的表中试着做出来: 首先呢我把表中的数据 ...

  6. vim 中替换

    将80替换为10.0.0.19:80 :g/80/s//10.0.0.19:80/g

  7. 【C++】继承（虚基类）

    类的继承与派生 面向对象技术强调软件的可重用性,这种重用性通过继承机制来实现.而在类的继承过程中,被重用的原有类称为基类,新创建的类称为派生类.派生类定义语法格式如下: class <派生类名& ...

  8. MySQL安装与基本配置

    一.简介 SQL语言 DDL:表.视图.索引.触发器操作等.CREATE/ALTER/DROP语句 DML:数据操作.SELECT/INSERT/UPDATE/DELETE DCL:权限设置.GRAN ...

  9. TCP连接建立和终止小结

    TCP连接建立(三次握手) 如图: 请求端发送一个SYN到服务器的相应端口,以及初始序号ISN 服务器发送包含服务器的初始序号的SYN作为应答,同时确认序号设置为客户的ISN+1 客户将确认序号设置为 ...

  10. ngx_http_uwsgi_module模块.md

    ngx_http_uwsgi_module ngx_http_uwsgi_module模块允许将请求传递到uwsgi服务器. 示例配置: location / { include uwsgi_para ...