Как использовать внешние фильтры даты в datatable используя asp. net mvc - PullRequest
Новая
       59

Как использовать внешние фильтры даты в datatable используя asp. net mvc

0 голосов
/ 20 марта 2020

Я работаю с данными. js и хочу использовать внешний фильтр даты для фильтрации данных ajax. поэтому при выборе даты в одном из двух ящиков с датой на основе выбранной даты я хочу обновить datatable ajax. Я пытался изменить событие, чтобы изменить поле даты, но я не знаю, как я могу передать выбранную дату ajax и соответствующему методу, который запрашивает базу данных.

Я хочу, чтобы значение было передано с URL, имеющим fromdate и todate при изменении даты, вот что я попробовал. но, похоже, не работает, так как в инструментах разработчика браузера на вкладке "Сеть" я не вижу выбранной даты.

Кто-нибудь может мне помочь с этой проблемой. 

<div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-3">
                        <label for="fromDate">From Date:</label>
                    </div>
                    <div class="col-md-9">
                        <input type="text" id="fromDate" class="form-control" name="fromDate" />
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-3">
                        <label for="toDate">To Date:</label>
                    </div>
                    <div class="col-md-9">
                        <input type="text" id="toDate" class="form-control" name="toDate" />
                    </div>
                </div>
            </div>
        </div>
        <table id="tablelist" class="table table-striped table-bordered dataTable no-footer" width="100%" role="grid" aria-describedby="datatable_fixed_column_info" style="width: 100%;">
            <thead class="bg-info">
                <tr role="row">
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th>Type</th>
                    <th>User</th>
                    <th>Line</th>
                    <th>Date</th>
                    <th>Text</th>
                    <th>Level</th>
                    <th>Done</th>
                    <th></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

вот мой javascript

    <script>
    $(document).ready(function () {
            var oTable = $('#tablelist').DataTable({
                bFilter: false,
                serverSide: true,
                searching: true,
                ajax: {
                    "type": "POST",
                    "url": '/Main/Index/?handler=List' + "&fromDate=" +$("#fromDate").val() + "&toDate=" + $("#toDate").val(),
                    "contentType": 'application/json; charset=utf-8',
                    'data': function (data) {
                        return data = JSON.stringify(data);
                    }
                },
                processing: true,
                paging: true,
                pagingType: "full_numbers",
                deferRender: true,
                columns: [

                    { data: "type" },
                    { data: "name" },
                    { data: "line" },
                    { data: "date" },
                    { data: "details" },
                    { data: "level" },
                    { data: "doneBy" }
                ],
                'columnDefs': [{
                    'targets': 7,
                    'searchable': false,
                    'orderable': false,
                    'bSortable': false,
                    'render': function (data, type, full, meta) {
                        return '<input class="center" type="checkbox" value="' +
                            full.Id+
                            '">';
                    }
                },
                {
                    'targets': 6,
                    'searchable': false,
                    'orderable': false,
                    'bSortable': false
                }],
                "order": [1, "asc"]

    $("#fromDate").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd/mm/yy"
            })

            $("#toDate").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd/mm/yy"
            })

            $("#fromDate").on('change', function () {
                oTable.ajax.reload();
            });

            $("#toDate").on('change', function () {
                oTable.ajax.reload();
            });
            });
    </script>

Пожалуйста, помогите мне, если кто-нибудь знает, как заставить эту вещь работать

...