Datatables 如何使用范围日期选择器筛选服务器端jquery数据表

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

<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'));
      });
});

服务器端操作：

[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

列进行筛选

---

我找到的大多数资源仅在前端使用datatables。

以下是自定义筛选的功能

HTML

制作两个控件，我使用Html助手方法创建下面的控件，并初始化上面正在执行的日期选择器

@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');
                }
            },                    
        ]                
    });

完成此操作后，请确保在用户单击应用日期过滤器时重新绘制数据表

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

现在，开始日期和结束日期将与API调用一起传递

API端

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

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

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

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