locked
I want to list records between two dates selected in Asp.Net Mvc jquery datatable I need to solve it quickly today. Please help. RRS feed

  • Question

  • User-2003602335 posted

    I want to list records between two dates selected in Asp.Net Mvc jquery datatable. How can do it? I need to solve it quickly today. Please help.

    function DetailList() {
            $('#detailTable').dataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Turkish.json"
                },
                "searching": false,
                "lengthChange": false,
                "bInfo": false,
                "processing": true, // for show progress bar
                //"serverSide": true, // for process server side
                "filter": true, // this is for disable filter (search box)
                "orderMulti": false, // for disable multiple column at once
                "responsive": true,
                "paging": true,
                "bDestroy": true,
                colReorder: {
                    realtime: true
                },
                "columnDefs": [{
                    "targets": '_all',
                    "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).css('padding-left', '30px')
                    }
                }],
                "ajax": {
                    "url": "/Detail/DetailList/",
                    "data": {
                        "basTarih": $('#ilkk').val(),
                        "bitTarih": $('#sonn').val()
                    },
                    "type": "GET",
                    "datatype": "html",
                    "dataSrc": ""
                },
                "columns": [
                    { "data": "PieceCount", "name": "PieceCount", "autoWidth": true },
                    { "data": "CreatedDate", "name": "CreatedDate", "autoWidth": true },
                    {
                        "data": null,
                        "render": function (value) { return '<td style=" text-align:right; border-top-color:#ececec; width:70%;">' + '<a style="font-size:17px;" href="/Detail/Create" class="la la-plus"></a>' + '<a style="font-size:17px; padding-left:10px;" href="/Detail/Edit/' + value.DetailID + '" class="la la-edit"></a>' + '<a style="font-size:17px; padding-left:10px;" href="/Detail/Delete/' + value.DetailID + '" class="la la-trash"></a>' + '</td>' + '</tr>'; }
                    }
                ],
            });
     public JsonResult DetailList(string basTarih, string bitTarih)
            {
                var sessionId = Convert.ToInt32(Session["UserID"]);
    
                List<DetailModel> messages = new List<DetailModel>();
                DetailRepository r = new DetailRepository();
                DateTime start = DateTime.MinValue;
                DateTime end = DateTime.MaxValue;
                var sDs = basTarih;
                var eDs = bitTarih;
                DateTime.TryParse(sDs, out start);
                DateTime.TryParse(eDs, out end);
                messages = r.DetailList(sessionId);
                if (start != DateTime.MinValue && end != DateTime.MinValue)
                {
                    messages = messages.Where(x => Convert.ToDateTime(x.CreatedDate) >= start && Convert.ToDateTime(x.CreatedDate) <= end).ToList();
                }
                return Json(messages, JsonRequestBehavior.AllowGet);
            }
    
            //GET: Detail
            public ActionResult Index()
            {
                var sessionId = Convert.ToInt32(Session["UserID"]);
                ViewBag.Name = Session["FirstName"];
                ViewBag.Company = Session["Company"];
                ViewBag.Logo = Session["Logo"];
                List<DetailModel> messages = new List<DetailModel>();
                DetailRepository r = new DetailRepository();
                messages = r.DetailList(sessionId);
                //var detail = db.Detail.Include(d => d.SubPiece).Include(d => d.User);
                return View(messages.ToList());
            }

    My output should be like the link. I need to solve it quickly today. Please help.

    http://plnkr.co/edit/8z7cojpJoCSJXRn9prNj?p=preview&preview

    Wednesday, June 10, 2020 5:46 PM

Answers

  • User1686398519 posted

    Hi, emre.senturk

    According to your needs, I modified your code, please refer to it.

    Remarks:

    "searching: false" needs to be deleted or set to true, the default value is true;

    @{
        Layout = null;
    }
    <a style="font-size:17px;" href="/Detail/Create" class="la la-plus">Create</a>
    <br />
    <p id="date_filter">
        <span id="date-label-from" class="date-label">From: </span><input class="date_range_filter date" type="text" id="ilkk" />
        <span id="date-label-to" class="date-label">To:</span><input class="date_range_filter date" type="text" id="sonn" />
    </p>
    <table id="detailTable" class="table" data-order="[[0,&quot;desc&quot;]]" width="100%">
        <thead>
            <tr>
                <th>
                    PieceCount
                </th>
                <th>
                    CreatedDate
                </th>
                <th>
    
                </th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/DataTables/css/dataTables.bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/DataTables/css/dataTables.jqueryui.min.css" rel="stylesheet" />
    <link href="~/Content/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.5.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/bootstrap-datepicker.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script>
            $(function () {
                var oTable = $('#detailTable').DataTable({
                    "language": {
                        "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Turkish.json"
                    },
                    "lengthChange": false,
                    "processing": true, // for show progress bar
                    //"serverSide": true, // for process server side
                    "filter": true, // this is for disable filter (search box)
                    "orderMulti": false, // for disable multiple column at once
                    "responsive": true,
                    "paging": true,
                    "bDestroy": true,
                    colReorder: {
                        realtime: true
                    },
                    "columnDefs": [{
                        "targets": '_all',
                        "createdCell": function (td, cellData, rowData, row, col) {
                            $(td).css('padding-left', '30px')
                        }
                    }],
                    "ajax": {
                        type: 'get',
                     'dataType': "json",
                     "data": {
                         "basTarih": $('#ilkk').val(),
                         "bitTarih": $('#sonn').val()
                      },
                        "url": "@Url.Action("DetailList")",
                        "dataSrc": function (result) {
                            return result;
                        }
                    },
                    "columns": [
                        {
                            "data": "PieceCount", "name": "PieceCount", "autoWidth": true,
                            "render": function (data) {
                                return data;
                            }
                        },
                        {
                            "data": "CreatedDate", "name": "CreatedDate", "autoWidth": true,
                            "render": function (data) {
                                var pattern = /Date\(([^)]+)\)/;
                                var results = pattern.exec(data);
                                var dt = new Date(parseFloat(results[1]));
                                return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
                            }
                        },
                        {
                            "data": null,
                            "render": function (value) {
                                return '<a style="font-size:17px; padding-left:10px;" href="/Detail/Edit/' + value.DetailID + '" class="la la-edit">Edit</a>' + '<a style="font-size:17px; padding-left:10px;" href="/Detail/Delete/' + value.DetailID + '" class="la la-trash">Delete</a>';
                            }
                        }
                    ]
                    });
                    $("#ilkk").datepicker({
                        "onSelect": function (date) {
                            minDateFilter = new Date(date).getTime();
                            oTable.draw();
                        }
                    }).keyup(function () {
                        minDateFilter = new Date(this.value).getTime();
                        oTable.draw();
                    });
                    $("#sonn").datepicker({
                        "onSelect": function (date) {
                            maxDateFilter = new Date(date).getTime();
                            oTable.draw();
                        }
                    }).keyup(function () {
                        maxDateFilter = new Date(this.value).getTime();
                        oTable.draw();
                    });
                });
            minDateFilter = "";
            maxDateFilter = "";
            $.fn.dataTableExt.afnFiltering.push(
            function (oSettings, aData, iDataIndex) {
                    if (typeof aData._date == 'undefined') {
                        aData._date = new Date(aData[1]).getTime();
                    }
                    if (minDateFilter && !isNaN(minDateFilter)) {
                        if (aData._date < minDateFilter) {
                            return false;
                        }
                    }
                    if (maxDateFilter && !isNaN(maxDateFilter)) {
                        if (aData._date > maxDateFilter) {
                            return false;
                        }
                    }
                    return true;
                }
            );
    </script>

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 11, 2020 9:03 AM