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
-
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,"desc"]]" 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