Biegral Blog

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using MVCDatatableApp.Models;

namespace MVCDatatableApp.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult DataHandler(DTParameters param)
        {
            try
            {
                var dtsource = new List<Customer>();
                using (var dc = new dataSetEntities())
                {
                    dtsource = dc.Customers.ToList();
                }

                var columnSearch = new List<string>();

                foreach (var col in param.Columns)
                {
                    columnSearch.Add(col.Search.Value);
                }

                var data = new ResultSet().GetResult(param.Search.Value, param.SortOrder, param.Start, param.Length,dtsource, columnSearch);
                var count = new ResultSet().Count(param.Search.Value, dtsource, columnSearch);
                var result = new DTResult<Customer>
                {
                    draw = param.Draw,
                    data = data,
                    recordsFiltered = count,
                    recordsTotal = count
                };
                return Json(result);
            }
            catch (Exception ex)
            {
                return Json(new {error = ex.Message});
            }
        }
    }
}

DatatablesViewModel.cs

using System.Collections.Generic;

namespace MVCDatatableApp.Models
{
    /// <summary>
    ///   完整的结果，如jQuery DataTables所理解的那样。
    /// </summary>
    /// <typeparam name="T">每行的数据类型</typeparam>
    public class DTResult<T>
    {
        /// <summary>
        ///该对象是一个响应的draw计数器 - 来自作为数据请求的一部分发送的draw参数。
        ///请注意，出于安全原因，强烈建议您将此参数转换为整数，而不是简单地回显客户端在draw参数中发送的内容，以防止跨站点脚本（XSS）攻击。
        /// </summary>
        public int draw { get; set; }

        /// <summary>
        /// 过滤前的总记录（即数据库中的记录总数）
        /// </summary>
        public int recordsTotal { get; set; }

        /// <summary>
        /// 过滤后的总记录（即应用过滤后的记录总数 - 不仅仅是为此页面数据返回的记录数）。
        /// </summary>
        public int recordsFiltered { get; set; }

        /// <summary>
        ///
        /// 要在表格中显示的数据。
        /// 这是一个数据源对象数组，每行一个，将由DataTables使用。
        /// 请注意，可以使用ajaxDT选项的dataSrc属性更改此参数的名称。
        /// </summary>
        public List<T> data { get; set; }
    }

    /// <summary>
    ///  您可以发送到jQuery DataTables以进行自动处理的其他列。
    /// </summary>
    public abstract class DTRow
    {
        /// <summary>
        ///  将dt-tag tr节点的ID属性设置为此值
        /// </summary>
        public virtual string DT_RowId
        {
            get { return null; }
        }

        /// <summary>
        /// 将此类添加到dt-tag tr节点
        /// </summary>
        public virtual string DT_RowClass
        {
            get { return null; }
        }

        /// <summary> 
        /// 将此数据属性添加到行的dt-tag tr节点，允许使用HTML5 data-*属性将抽象数据添加到节点。
        /// 这使用jQuery  data()方法设置数据，然后也可以将其用于以后的检索（例如在点击事件上）。
        /// </summary>
        public virtual object DT_RowData
        {
            get { return null; }
        }
    }

    /// <summary>
    /// jQuery DataTables在AJAX查询中发送的参数。
    /// </summary>
    public class DTParameters
    {
        /// <summary>
        /// Draw 计数器。
        /// DataTables使用它来确保从服务器端处理请求返回的Ajax是由DataTables按顺序绘制的（Ajax请求是异步的，因此可以不按顺序返回）。
        /// 这用作绘制返回参数的一部分（见下文）。
        /// </summary>
        public int Draw { get; set; }

        /// <summary>
        ///定义表中所有列的数组
        /// </summary>
        public DTColumn[] Columns { get; set; }

        /// <summary> 
        ///定义排序列数的数组 - 即，如果数组长度为1，则执行单列排序，否则执行多列排序。
        /// </summary>
        public DTOrder[] Order { get; set; }

        /// <summary>
        ///分页第一个记录指示器。
        ///这是当前数据集的起始点（基于0索引 - 即0是第一个记录）。
        /// </summary>
        public int Start { get; set; }

        /// <summary> 
        ///表可以在当前draw中显示的记录数。
        ///除非服务器返回的记录较少，否则预计返回的记录数将等于此数。 
        ///请注意，这可以为-1表示应返回所有记录（尽管这会消除服务器端处理的任何好处！）
        /// </summary>
        public int Length { get; set; }

        /// <summary>
        /// 全局搜索值。要应用于所有searchable为true的列。
        /// </summary>
        public DTSearch Search { get; set; }

        /// <summary>
        ///自定义列，用于对第一个Order列进行进一步排序。
        /// </summary>
        public string SortOrder
        {
            get
            {
                return Columns != null && Order != null && Order.Length > 0
                    ? Columns[Order[0].Column].Data +
                      (Order[0].Dir == DTOrderDir.DESC ? " " + Order[0].Dir : string.Empty)
                    : null;
            }
        }
    }

    /// <summary>
    ///   一个jQuery DataTables列
    /// </summary>
    public class DTColumn
    {
        /// <summary>
        ///列的数据源，由columns.data定义。
        /// </summary>
        public string Data { get; set; }

        /// <summary>
        ///列的名称，由columns.name定义。
        /// </summary>
        public string Name { get; set; }

        /// <summary>
        ///用于指示此列是否可搜索（true）或不是（false）的标志。 这由columns.searchable控制。
        /// </summary>
        public bool Searchable { get; set; }

        /// <summary>
        /// 用于指示此列是否可排序（true）或不是（false）的标志。 这由columns.orderable控制。
        /// </summary>
        public bool Orderable { get; set; }

        /// <summary>
        ///   具体搜索值
        /// </summary>
        public DTSearch Search { get; set; }
    }

    /// <summary>
    ///     An order, as sent by jQuery DataTables when doing AJAX queries.
    ///执行AJAX查询时由jQuery DataTables发送的排序。
    /// </summary>
    public class DTOrder
    {
        /// <summary>
        ///应该排序的列。
        ///这是对也提交给服务器的列数组的索引引用。
        /// </summary>
        public int Column { get; set; }

        /// <summary>
        ///排序此列的方向。
        ///它将是dt-string asc或dt-string desc，分别表示升序或降序。
        /// </summary>
        public DTOrderDir Dir { get; set; }
    }

    /// <summary>
    ///对jQuery DataTables的顺序排序
    /// </summary>
    public enum DTOrderDir
    {
        ASC,
        DESC
    }

    /// <summary>
    ///搜索，由jQuery DataTables在执行AJAX查询时发送。
    /// </summary>
    public class DTSearch
    {
        /// <summary>
        ///全局搜索值。 要应用于所有可搜索为true的列。
        /// </summary>
        public string Value { get; set; }

        /// <summary> 
        ///如果全局过滤器应被视为高级搜索的正则表达式，则返回true，否则返回false。
        ///请注意，通常服务器端处理脚本不会在大型数据集上执行正则表达式搜索，但在技术上可以并且由您的脚本自行决定。
        /// </summary>
        public bool Regex { get; set; }
    }
}

ResultSet.cs

using System.Collections.Generic;
using System.Linq;
using System.Web.UI.WebControls;
using MVCDatatableApp.Models;

//对于SortBy方法
namespace MVCDatatableApp
{
    public class ResultSet
    {
        public List<Customer> GetResult(string search, string sortOrder, int start, int length, List<Customer> dtResult,
            List<string> columnFilters)
        {
            return FilterResult(search, dtResult, columnFilters).SortBy(sortOrder).Skip(start).Take(length).ToList();
        }

        public int Count(string search, List<Customer> dtResult, List<string> columnFilters)
        {
            return FilterResult(search, dtResult, columnFilters).Count();
        }

        private IQueryable<Customer> FilterResult(string search, List<Customer> dtResult, List<string> columnFilters)
        {
            var results = dtResult.AsQueryable();

            results =
                results.Where(
                    p =>
                        (search == null || p.Name != null && p.Name.ToLower().Contains(search.ToLower()) ||
                         p.City != null && p.City.ToLower().Contains(search.ToLower()) ||
                         p.Postal != null && p.Postal.ToLower().Contains(search.ToLower()) ||
                         p.Email != null && p.Email.ToLower().Contains(search.ToLower()) ||
                         p.Company != null && p.Company.ToLower().Contains(search.ToLower()) ||
                         p.Account != null && p.Account.ToLower().Contains(search.ToLower()) ||
                         p.CreditCard != null && p.CreditCard.ToLower().Contains(search.ToLower()))
                        &&
                        (columnFilters[0] == null ||
                         (p.Name != null && p.Name.ToLower().Contains(columnFilters[0].ToLower())))
                        &&
                        (columnFilters[1] == null ||
                         (p.City != null && p.City.ToLower().Contains(columnFilters[1].ToLower())))
                        &&
                        (columnFilters[2] == null ||
                         (p.Postal != null && p.Postal.ToLower().Contains(columnFilters[2].ToLower())))
                        &&
                        (columnFilters[3] == null ||
                         (p.Email != null && p.Email.ToLower().Contains(columnFilters[3].ToLower())))
                        &&
                        (columnFilters[4] == null ||
                         (p.Company != null && p.Company.ToLower().Contains(columnFilters[4].ToLower())))
                        &&
                        (columnFilters[5] == null ||
                         (p.Account != null && p.Account.ToLower().Contains(columnFilters[5].ToLower())))
                        &&
                        (columnFilters[6] == null ||
                         (p.CreditCard != null && p.CreditCard.ToLower().Contains(columnFilters[6].ToLower())))
                    );

            return results;
        }
    }
}

Index.cshtml

@{
    ViewBag.Title = "Home Page";
}
@model IEnumerable<MVCDatatableApp.Models.Customer>

<!doctype html>
<html>
<head>
    <title>@ViewBag.Title - MVC Datatables App</title>
</head>

<body>
<div class="container">
    <h3>Customer Report</h3>

    <div class="span12">
        <table class="table table-striped" id="datatab">
            <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.City)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Postal)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Email)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Company)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Account)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.CreditCard)
                </th>
            </tr>
            </thead>
            <tbody></tbody>
            <tfoot>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.City)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Postal)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Email)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Company)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Account)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.CreditCard)
                </th>
            </tr>
            </tfoot>
        </table>
    </div>
</div>
</body>

</html>

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            @Html.ActionLink("MVC 5 jQuery Datatables 1.10+ App", "Index", "Home", null, new {@class = "navbar-brand"})
        </div>
    </div>
</div>
<div class="container body-content">
    @RenderBody()
    <hr/>
    <footer>
        <p>
            &copy; @DateTime.Now.Year
        </p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", false)
</body>
</html>

index.js

$(document).ready(function() {

    $("#datatab tfoot th").each(function() {
        $(this).html('<input type="text" />');
    });

    var oTable = $("#datatab").DataTable({
           "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": ": 以降序排列此列"
            }
        },
        "serverSide": true,
        "ajax": {
            "type": "POST",
            "url": "/Home/DataHandler",
            "contentType": "application/json; charset=utf-8",
            'data': function(data) { return data = JSON.stringify(data); }
        },
        "dom": "frtiS",
        "scrollY": 500,
        "scrollX": true,
        "scrollCollapse": true,
        "scroller": {
            loadingIndicator: false //其中scrollY表示：定义一个高度,当列表内容超过这个高度时,显示垂直滚动条。
            //scroller表示开启滚动翻页。
        },
        "processing": true,
        "paging": true,
        "deferRender": true,
        "columns": [
            { "data": "Name" },
            { "data": "City" },
            { "data": "Postal" },
            { "data": "Email" },
            { "data": "Company" },
            { "data": "Account" },
            { "data": "CreditCard" }
        ],
        "order": [0, "asc"]

    });

    oTable.columns().every(function() {
        var that = this;

        $("input", this.footer()).on("keyup change", function() {
            that.search(this.value).draw();
        });
    });

});

结果