dimanche 9 mai 2021

datatables date range filter not working on EJS Project

I'm trying to make my table sortable using this library https://datatables.net/extensions/datetime/examples/integration/datatables.html, but when i enter the date on the input field the table not showing any result

<div class="table-responsive">
                                <table border="0" cellspacing="5" cellpadding="5">
                                    <tbody>
                                        <tr>
                                            <td>Minimum date:</td>
                                            <td><input type="date" id="min" name="min"></td>
                                        </tr>
                                        <tr>
                                            <td>Maximum date:</td>
                                            <td><input type="date" id="max" name="max"></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table class="table table-bordered w-100" id="example" width="100%"
                                    cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>NIK</th>
                                            <th>Company</th>
                                            <th>Location</th>
                                            <th>Departement</th>
                                            <th>Created</th>
                                            <th>Updated</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th>NIK</th>
                                            <th>Company</th>
                                            <th>Location</th>
                                            <th>Departement</th>
                                            <th>Created</th>
                                            <th>Updated</th>
                                            <th>Action</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        <tr>
                                            <td>Tiger Nixon</td>
                                            <td>System Architect</td>
                                            <td>Edinburgh</td>
                                            <td>61</td>
                                            <td>2011/04/25</td>
                                            <td>2011/04/25</td>
                                            <td> <a href="/panel/panel_detail_update"><button
                                                        class="btn btn-info">Detail</button></a>
                                        </tr>
                                        <tr>
                                            <td> Nixon</td>
                                            <td>System Architect</td>
                                            <td>Edinburgh</td>
                                            <td>61</td>
                                            <td>2011/04/25</td>
                                            <td>2011/04/25</td>
                                            <td> <a href="/panel/panel_detail_update"><button
                                                        class="btn btn-info">Detail</button></a>
                                        </tr>
                                        <tr>
                                            <td>Tiger </td>
                                            <td>System Architect</td>
                                            <td>Edinburgh</td>
                                            <td>61</td>
                                            <td>2011/04/25</td>
                                            <td>2011/04/25</td>
                                            <td> <a href="/panel/panel_detail_update"><button
                                                        class="btn btn-info">Detail</button></a>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

this my java script

 <script>
                            $.fn.dataTable.ext.search.push(
                                function (settings, data, dataIndex) {
                                    var min = minDate.val();
                                    var max = maxDate.val();
                                    var date = new Date(data[5]);

                                    if (
                                        (min === null && max === null) ||
                                        (min === null && date <= max) ||
                                        (min <= date && max === null) ||
                                        (min <= date && date <= max)
                                    ) {
                                        return true;
                                    }
                                    return false;
                                }
                            );

                        </script>

am i doing anything wrong? i already tried to copy the exact code from the docummentation




Aucun commentaire:

Enregistrer un commentaire