ASP.NET jquery 数据表过滤

Question

我是 ASP.NET 的新手，正在尝试构建购物应用程序。我正在使用 jquery.datatable 和 ajax 来显示 table:

商店中的所有商品

@model IEnumerable<OnlineShoppingApp.Models.Category>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="col-md-2">
    <ul id="categories">
        @foreach(var category in Model)
        {
            <li data-category-id="@category.Id">@category.Name</li>
        }
    </ul>
</div>
<div class="col-md-10">
    <table id="items" class=" table table-bordered table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Price</th>
                <th>Category</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

@section Scripts {
    <script>
        $(document).ready(function () {
            $("#items").DataTable(
                {
                    ajax:
                    {
                        url: "/api/items",
                        dataSrc: ""
                    },
                    columns:
                    [
                        {
                            data: "Name",
                        },
                        {
                            data: "Description",
                        },
                        {
                            data: "Price",
                        },
                        {
                            data: "Category.Name",
                        }
                    ]
                }
            )

            $("li").click(function () {
                var element = $(this);
            });
        });

    </script>
    }

并且在类别控制器中：

        public ActionResult Index()
    {
        var categories = context.Categories.ToList();

        return View(categories);
    }

在左侧，我列出了所有类别，当单击一个类别时，我想过滤此数据table以仅显示与所选类别匹配的项目。我不想重新加载页面，而且我不知道从哪里开始。

Answer 1

您只需要在您的布局中添加以下CSS和js文件

 //cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css
 //cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js

现在在您的项目页面中添加以下代码

 <script>
        $(document).ready(function () {
            $("#items").DataTable({
                "processing": true, // for show progress bar
                "serverSide": true, // for process server side
                "filter": false, // this is for disable filter (search box)
                "orderMulti": false, // for disable multiple column at once
                "ajax": {
                    "url": "/api/items",
                    "type": "POST",
                    "datatype": "json"
                },
                "columns": [
                        { "data": "Name", "name": "Name", "autoWidth": true },
                        { "data": "Description", "name": "Description", "autoWidth": true },
                        { "data": "Price", "name": "Price", "autoWidth": true },
                        { "data": "CategoryName", "name": "CategoryName", "autoWidth": true }

                ]
            });
        });
    </script>

控制器代码。

[HttpPost]
        public ActionResult items()
        {

            var draw = Request.Form.GetValues("draw").FirstOrDefault();
            var start = Request.Form.GetValues("start").FirstOrDefault();
            var length = Request.Form.GetValues("length").FirstOrDefault();
            //Find Order Column
            var sortColumn = Request.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][name]").FirstOrDefault();
            var sortColumnDir = Request.Form.GetValues("order[0][dir]").FirstOrDefault();


            int pageSize = length != null? Convert.ToInt32(length) : 0;
            int skip = start != null ? Convert.ToInt32(start) : 0;
            int recordsTotal = 0;

                var v= context.Categories.ToList();

                //SORT
                if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDir)))
                {
                    v = v.OrderBy(sortColumn + " " + sortColumnDir);
                }

                recordsTotal = v.Count();
                var data = v.Skip(skip).Take(pageSize).ToList();
                return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data }, JsonRequestBehavior.AllowGet);
            }

ASP.NET jquery 数据表过滤

ASP.NET jquery datatable filtering

jquery

asp.net-ajax

datatables

asp.net-mvc-5

现在在您的项目页面中添加以下代码

控制器代码。