Jquery DataTable

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

Answer 1

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

Answer 2

User-797751191 posted

Hi Samwu

  I wanted is it possible thru Existing Search option

Thanks

Answer 3

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.

Answer 4

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.