locked
Jquery DataTable RRS feed

  • Question

  • User-797751191 posted

    Hi

       In Jquery Datatable can we search records using Date Range like 01/07/2019..31/07/2019. or we can give only single date

    Thanks

    Sunday, July 21, 2019 10:43 AM

Answers

  • User288213138 posted

    Hi jsshivalik,

    According to your description, here is a demo for your reference.

    Use the Datepicker plug-in to get the range of dates you want to filter, And then we sift through the data, and finally listen to the two range filtering inputs to redraw on input.

    The code:

    <script src="../Scripts/jquery-3.3.1.min.js"></script>
        <script src="../Test Code5/NewFolder1/jquery-ui.js"></script>
        <link href="NewFolder1/jquery-ui.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
        <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
        <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>
    <table border="0" cellspacing="5" cellpadding="5">
            <tbody>
                <tr>
                    <td>Minimum Date:</td>
                    <td><input name="min" id="min" type="text"></td>
                </tr>
                <tr>
                    <td>Maximum Date:</td>
                    <td><input name="max" id="max" type="text"></td>
                </tr>
            </tbody>
        </table>
        <table class="display" id="example" cellspacing="0">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2019/07/01</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2019/07/02</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Sonya Frost</td>
                    <td>Software Engineer</td>
                    <td>Edinburgh</td>
                    <td>23</td>
                    <td>2019/07/03</td>
                    <td>$103,600</td>
                </tr>
                <tr>
                    <td>Jena Gaines</td>
                    <td>Office Manager</td>
                    <td>London</td>
                    <td>30</td>
                    <td>2019/07/04</td>
                    <td>$90,560</td>
                </tr>
    
            </tbody>
        </table>
    

    The result:

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 22, 2019 8:17 AM

All replies

  • User288213138 posted

    Hi jsshivalik,

    According to your description, here is a demo for your reference.

    Use the Datepicker plug-in to get the range of dates you want to filter, And then we sift through the data, and finally listen to the two range filtering inputs to redraw on input.

    The code:

    <script src="../Scripts/jquery-3.3.1.min.js"></script>
        <script src="../Test Code5/NewFolder1/jquery-ui.js"></script>
        <link href="NewFolder1/jquery-ui.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
        <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
        <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>
    <table border="0" cellspacing="5" cellpadding="5">
            <tbody>
                <tr>
                    <td>Minimum Date:</td>
                    <td><input name="min" id="min" type="text"></td>
                </tr>
                <tr>
                    <td>Maximum Date:</td>
                    <td><input name="max" id="max" type="text"></td>
                </tr>
            </tbody>
        </table>
        <table class="display" id="example" cellspacing="0">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2019/07/01</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2019/07/02</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Sonya Frost</td>
                    <td>Software Engineer</td>
                    <td>Edinburgh</td>
                    <td>23</td>
                    <td>2019/07/03</td>
                    <td>$103,600</td>
                </tr>
                <tr>
                    <td>Jena Gaines</td>
                    <td>Office Manager</td>
                    <td>London</td>
                    <td>30</td>
                    <td>2019/07/04</td>
                    <td>$90,560</td>
                </tr>
    
            </tbody>
        </table>
    

    The result:

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 22, 2019 8:17 AM
  • User-797751191 posted

    Hi Samwu

      I wanted is it possible thru Existing Search option

    Thanks

    Monday, July 22, 2019 10:39 AM
  • User475983607 posted

    jsshivalik

    I wanted is it possible thru Existing Search option

    What is the "Existing Search option"?  Do yo mean without configuring DataTable?  If so, no.   It is up to you - the programming - to configure DataTable.

    This post like your others appears you are not reading the reference documentation and expect some kind of magical solution that matches your expectation.  Please read the documentation and post your code if you need help.

    Monday, July 22, 2019 11:05 AM
  • User-2054057000 posted

    Hi Samwu

      I wanted is it possible thru Existing Search option

    Thanks

    The above answer posted is already using the existing search option. You cannot customize the datatables any further in this regard.

    Monday, July 22, 2019 12:04 PM