Remove From My Forums

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

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

Answered by:

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

Question

Answers