datatables - 如何使用范围日期选择器过滤服务器端 jquery 数据表

Question

我正在尝试使用此日期范围选择器来过滤数据表处理的服务器端。

<div class="row pb-2">
    ...
        <input type="text" class="form-control" name="daterange"/>
    ...
</div>

$(function() {
   $('input[name="daterange"]').daterangepicker({
      opens: 'right',
      locale: { format: 'DD-MM-YYYY' }
      }, 
    function (start, end, label) {     
         minDate = start.format('DD-MM-YYYY');
         minDate = end.format('DD-MM-YYYY');
         console.log("Dates Selected: " + start.format('DD-MM-YYYY') + ' to ' + end.format('DD-MM-YYYY'));
      });
});

JQuery 数据表:

var table = $('#visitorsTable').DataTable({                
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": '@Url.Action("GetData", "History")',
                "type": "POST",
                "datatype": "json"
            },               
            "columns": [
                { "data": "VisitorID" },
                { "data": "Visitor" },
                { "data": "Email" },
                { "data": "PhoneNumber" },
                {
                    "data": "CheckedIn",
                    "render": function (d) {
                        return moment(d).format('DD-MM-YYYY HH:mm');
                    }
                },                    
            ]                
        });

服务器端操作:

[HttpPost]
public ActionResult GetData()
{
    // Initialization.   
    JsonResult result = new JsonResult();
    try
    {
        // Initialization.   
        string search = Request.Form.GetValues("search[value]")[0];
        string draw = Request.Form.GetValues("draw")[0];
        string order = Request.Form.GetValues("order[0][column]")[0];
        string orderDir = Request.Form.GetValues("order[0][dir]")[0];
        int startRec = Convert.ToInt32(Request.Form.GetValues("start")[0]);
        int pageSize = Convert.ToInt32(Request.Form.GetValues("length")[0]);

        // Loading.   
        var data = LoadData();

        // Total record count.   
        int totalRecords = data.Count;

        // Verification.   
        if (!string.IsNullOrEmpty(search) && !string.IsNullOrWhiteSpace(search))
        {
            // Apply search   
            data = data.Where(v =>
                       v.Visitor.ToLower().Contains(search.ToLower())                                 
                       v.Email.ToString().ToLower().Contains(search.ToLower()) ||
                       v.PhoneNumber.ToString().Contains(search.ToLower()) ||
                       v.CheckedIn.ToString("dd-MM-yyyy HH:mm").Contains(search)
                       ).ToList();
        }

        // Sort
        data = SortByColumnWithOrder(order, orderDir, data);

        // Filter record count.   
        int recFilter = data.Count;

        // Apply pagination.   
        data = data.Skip(startRec).Take(pageSize).ToList();

        // Loading drop down lists.   
        result = Json(new
        {
            draw = Convert.ToInt32(draw),
            recordsTotal = totalRecords,
            recordsFiltered = recFilter,
            data = data
        }, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {
        // Info   
        Console.Write(ex);
    }
    // Return info.   
    return result;      
}

我能够获取选定的日期范围值，并且数据表的处理也可以。

如何使用选定的范围值按服务器端数据表的 CheckedIn 列进行过滤？

我发现的大部分资源都只是前端的数据表。

Answer 1

这是您可以使用自定义过滤执行的操作。

HTML

制作两个控件，我用Html helper方法在下面创建，并在上面初始化你正在做的日期选择器。

@Html.TextBox("StartDate", "", new { @class = "form-control Startdatepicker", 
placeholder = "dd/mm/yyyy", @readonly = "readonly" })
@Html.TextBox("EndDate", "", new { @class = "form-control Enddatepicker", 
placeholder = "dd/mm/yyyy", @readonly = "readonly" })

JQuery 数据表 JS

使用日期范围值添加数据属性

"data": function (data) {
                var startDate = $('#StartDate').val();
                var endDate = $('#EndDate').val();
                data.startDate = startDate;
                data.endDate = endDate;
            }

你的JS会变成下面这样。

var table = $('#visitorsTable').DataTable({                
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": '@Url.Action("GetData", "History")',
            "type": "POST",
            "datatype": "json",



           "data": function (data) {
                var startDate = $('#StartDate').val();
                var endDate = $('#EndDate').val();
                data.startDate = startDate;
                data.endDate = endDate;
            }


        },               
        "columns": [
            { "data": "VisitorID" },
            { "data": "Visitor" },
            { "data": "Email" },
            { "data": "PhoneNumber" },
            {
                "data": "CheckedIn",
                "render": function (d) {
                    return moment(d).format('DD-MM-YYYY HH:mm');
                }
            },                    
        ]                
    });

完成此操作后，请确保在用户单击 Apply Date Filter 时重新绘制您的数据表。

$("#filter").click(function () {
            table.fnDraw();
        });

现在 Start Date 和 End Date 将与您的 API 调用一起传递。

API 端

您将能够获取日期范围值，如下所示。

var startDate = Request["startDate"];
var endDate = Request["endDate"];

现在您可以应用这些日期过滤器了。