MVC5和Jquery Datatables1.10

àì夳堔傛蜴生んèń 2021-06-26 16:06 202阅读 0赞

## 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>
                © @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();
            });
        });
    
    });

## 结果 ##

![在这里插入图片描述][20190116134408519.png]

[20190116134408519.png]: /images/20210626/345a51261eb547d798c34c3d55012eaf.png