Jquery DataTable date filter not working in client side -
i using jquery datatable in mvc application. want filter data in datatable using date-range. when page loads getting data db. need implement date range filter in 1 column of datatable in client side. have tried below coding date not getting filtered.
html table:
<table border="0" cellspacing="5" cellpadding="5"> <tbody> <tr> <td>from date:</td> <td><input type="text" id="min" name="min"></td> </tr> <tr> <td>to date:</td> <td><input type="text" id="max" name="max"></td> </tr> </tbody> </table> <table id="billing"> <thead> <tr> <th>select</th> <th>company name</th> <th>amount</th> <th>invoice date</th> <th>status</th> <th>comments</th> </tr> </thead> <tbody> @foreach (var item in model) { <tr> <td><input type="checkbox" value=@item.companyid /></td> <td> @item.companyname </td> <td> @item.totalamount </td> <td> @item.invoicedate </td> <td> @item.status </td> <td> @item.notes </td> </tr> } </tbody> </table>
jquery datatable initialize:
<script> $(document).ready(function () { $("#min").datepicker(); $("#max").datepicker(); var table = $('#billing').datatable( { "alengthmenu": [[5, 10, 20, -1], [5, 10, 20, "all"]], "idisplaylength": 10 }).columnfilter({ splaceholder: "head", aocolumns: [null, null, null, { "type": "date-range" }, null, null] }); // event listener 2 range filtering inputs redraw on input $('#min, #max').keyup(function () { table.draw(); }); }); $.fn.datatable.ext.search.push( function (settings, data, dataindex) { var datemin = $('#min').attr("value"); var datemax = $('#max').attr("value"); datemin = datemin.substring(0, 4) + daterange.substring(5, 7) + daterange.substring(8, 10); datemax = datemax.substring(13, 17) + daterange.substring(18, 20) + daterange.substring(21, 23); var date = adata[3]; // remove time stamp out of date // 2010-04-11 20:48:22 -> 2010-04-11 date = date.substring(0, 10); // remove "-" characters // 2010-04-11 -> 20100411 date = date.substring(0, 4) + date.substring(5, 7) + date.substring(8, 10) // run through cases if (datemin == "" && date <= datemax) { return true; } else if (datemin == "" && date <= datemax) { return true; } else if (datemin <= date && "" == datemax) { return true; } else if (datemin <= date && date <= datemax) { return true; } // failed return false; } ); </script>
Comments
Post a Comment