locked
Html Table Date Range filter RRS feed

  • Question

  • User2041008840 posted

    Hi, 
    I am developing website in asp.net core

    I am fetch data from db and showing into view (cshtml). in <table>. for customization i am using Datatables Jquery which is so awesome. but i want to filter table by date range
    like Date From And Date To 
    I select both date and it will show data on basis of filter. 
    I have column in datatable as 'Date Created'. So I want to filter date created between date from and date to 

    is there any code for it ? in Datatables Jquery. 

    Please let me know

    Saturday, September 21, 2019 11:11 AM

Answers

  • User-719153870 posted

    Hi Prathamesh,

    I think this demo is what you are looking for.

    You will need to add below references in your current page:

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" />
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <script src="Scripts/jquery-ui.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

    The key code in this demo is:

    <script>
            $(document).ready(function () {
                $.fn.dataTable.ext.search.push(
            function (settings, data, dataIndex) {
                var min = $('#min').datepicker("getDate");
                var max = $('#max').datepicker("getDate");
                var startDate = new Date(data[4]);
                if (min == null && max == null) { return true; }
                if (min == null && startDate <= max) { return true;}
                if(max == null && startDate >= min) {return true;}
                if (startDate <= max && startDate >= min) { return true; }
                return false;
            }
            );
    
           
                $("#min").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
                $("#max").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
                var table = $('#example').DataTable();
    
                // Event listener to the two range filtering inputs to redraw on input
                $('#min, #max').change(function () {
                    table.draw();
                });
            });
        </script>

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 23, 2019 6:24 AM