Как отфильтровать jquery на стороне сервера с помощью выбора даты диапазона - PullRequest
Новая
       12

Как отфильтровать jquery на стороне сервера с помощью выбора даты диапазона

0 голосов
/ 25 февраля 2019

Я пытаюсь использовать этот инструмент выбора диапазона дат для фильтрации обрабатываемой на стороне сервера данных.

<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 Datatable: 

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

Я могу получить выбранные значения диапазона дат и обработатьDataatable тоже хорошо.

Как использовать выбранные значения диапазона для фильтрации по столбцу CheckedIn таблицы данных на стороне сервера?

Большинство ресурсов, которые я обнаружил, имеют таблицы данных только на внешнем интерфейсе..

1 Ответ

0 голосов
/ 22 июня 2019

Вот что вы можете сделать с пользовательской фильтрацией.

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

Как только вы это сделаете, убедитесь, что re draw ваши данные, когда пользователь нажимает Применить фильтр даты . 

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

Теперь Start Date и End Date будут переданы с вашим вызовом API.

API Side

Вы сможете получить значения диапазона дат следующим образом. 

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

Теперь вы можете применять эти фильтры даты.

...