Блог

У меня есть таблица заказов,

фильтрация, сортировка и записи на странице выполняются на стороне сервера.

Как я могу заставить работать фильтрацию статуса с помощью флажка (см. Прикрепленный скриншот)?

При изменении номера записей или поиске в поле поиска или сортировки запускается действие, которое извлекает данные (getList ()), я хочу запустить его, когда установите Снимите один из флажков. статус.

Мое действие :

 public ActionResult GetList()
        {
            //Server Side parameters
            int start = Convert.ToInt32(Request.Form["start"].FirstOrDefault());
            int length = Convert.ToInt32(Request.Form["length"].FirstOrDefault());
            string searchValue = Request.Form["search[value]"].FirstOrDefault();
            string sortColumnName = Request.Form["columns[" Request.Form["order[0][column]"] "][name]"].FirstOrDefault();
            string sortDirection = Request.Form["order[0][dir]"].FirstOrDefault();
            List<Order> orderList = new List<Order>();
                orderList = _unitOfWork.Order.GetAll().ToList();
            int totalRows = orderList.Count;
            foreach (Order order in orderList)
            {
                order.StringDate = order.UsDate.Day   "/"   order.UsDate.Month   "/"   order.UsDate.Year;
            }
//
 //filtering done here
//
            int totalRowsAfterFiltering = orderList.Count;
//
//Sorting done here
//
            //orderList = orderList.OrderBy(x => x.Id //sortColumnName   " "   sortDirection).ToList<Order>();
            orderList = orderList.Skip(start).Take(length).ToList<Order>();
            foreach (Order order in orderList)
            {
                order.AllowComplaint = allowComplaint(order.Id.ToString());
            }
            return Json(new { data = orderList, draw = Request.Form["draw"], recordsTotal = totalRows ,
                        recordsFiltered = totalRowsAfterFiltering});
        }
    
 

Javascript Ajax вызывает действие :

 <script>
    $(document).ready(function () {
        $('#tblData').DataTable({
            "ajax": {
                "url": "OrderAdmin/GetList",
                "type": "POST",
                "datatype": "json"
            },
            "columns": [
                { "data": "id", "name": "Id" },
                { "data": "orderStatus", "name": "OrderStatus" },
                { "data": "productName", "name": "ProductName" },
                { "data": "stringDate", "name": "StringDate" },
                { "data": "userNameToShow", "name": "UserNameToShow" },
                { "data": "storeName", "name": "StoreName" },
                {
                    "data": "quantity", "name": "Quantity", "render": function (data) {
                        if (data > 1)
                            return `<div class="text-center" style="font-weight:bold;background-color:darkseagreen"><label >${data}</label></div>`
                        else
                            return `<div class="text-center"><label>${data}</label></div>`
                    }
                },
                { "data": "cost", "name": "Cost" },
                {
                    "data": "fullAddress", "name": "FullAddress", "render": function (data) {
                        return `<textarea readonly>${data}</textarea>`
                    },
                    "width": "20%"
                    },
                { "data": "trackingNumber", "name": "TrackingNumber", "width": "200px"},
                {
                    "data": {
                        "orderStatus": "orderStatus",
                        "id": "id",
                        "allowComplaint": "allowComplaint"
                    },
                    "render": function (data) {
                        if (data.orderStatus == 'Accepted') {
                            return `
                        <div class="text-center">
                            <a href="/Admin/OrderAdmin/UpdateOrder/${data.id}" class="btn btn-success text-white" style="cursor:pointer">
                                <i class="fas fa-edit"></i>
                            </a>
                        </div>
                         `}
                        else if (data.orderStatus == 'Done' amp;amp; data.allowComplaint) {
                            return `
                                          <div class="text-center">
                                            <a href="/Admin/Complaints/AddComplaint/${data.id}" class="btn btn-info text-white" style="cursor:pointer">
                                            <i class="fas fa-ticket-alt"></i>
                                            </a>
                                          </div>
                                        `
                        }
                        else { return `<div></div>` }
                    }, "width": "5%"
                }
            ],
            "serverSide": "true",
            "order": [0, "desc"],
            "processing": "true"
        });
    });
</script>