Блог

У меня есть система управления любительским спортивным клубом, которую я написал с использованием HTML5 / PHP / Bootstrap, и я использую таблицы данных в разных местах.

Для одной из таблиц, управляющей списком ожидания, мне нужно отфильтровать базу данных, установленную по максимальному и минимальному возрасту, поэтому я использовал код, предоставленный Datatables по следующей ссылке (https://www.datatables.net/examples/plug-ins/range_filtering.html ).

Все, что касается таблицы, работает, за исключением изменения значений max и min, не имеет никакого эффекта.

В области заголовка есть следующий Javascript (скопированный из таблиц данных)

         $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var min = parseInt($('#min').val(), 10);
                    var max = parseInt($('#max').val(), 10);
                    var age = parseFloat(data[2]) || 0; // use data for the age column

                    if ((isNaN(min) amp;amp; isNaN(max)) ||
                            (isNaN(min) amp;amp; age <= max) ||
                            (min <= age amp;amp; isNaN(max)) ||
                            (min <= age amp;amp; age <= max))
                    {
                        return true;
                    }
                    return false;
                }
        );
 

Таблицы в разделе тела (html / php)

             <table border="0" cellspacing="5" cellpadding="5">
                <tr>
                    <td>Minimum age:</td>
                    <td><input type="number" id="min" name="min" min="3" max="21"></td>
                    <td>Maximum age:</td>
                    <td><input type="number" id="max" name="max" min="3" max="21"></td>
                </tr>
            </table>

            <table id = "table" class = "display compact cell-border stripe" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Gender</th>
                        <th>Age</th>
                        <th>Date Added</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $query = $conn->query("SELECT * FROM `waitlist` WHERE wl_status ='Active'") or die(mysqli_error());
                    while ($f_query = $query->fetch_array()) {

                        echo '<tr>';
                        echo '<td>' . $f_query['wl_Name'] . '</td>';
                        echo '<td>' . $f_query['wl_Gender'] . '</td>';
                        echo '<td>' . getAge($f_query['wl_DoB']) . '</td>';
                        echo '<td data-sort="' . $f_query['wl_DateAdded'] . '">' . date('d/m/Y', strtotime($f_query['wl_DateAdded'])) . '</td>';
                        echo '<td><center><a href = "wl_edit.php?wl_id=' . $f_query['wl_ID'] . '" class = "btn btn-warning btn-sm"><span class = "fa fa-edit"></span> Details</a>' . ' | <a onclick = "javascript:confirmationDelete($(this)); return false;" href = "wl_delete.php?wl_id=' . $f_query['wl_ID'] . '" class = "btn btn-danger btn-sm"><span class = "fa fa-trash"></span> Delete</a>' . ' | <a  href = "wl_transfer.php?wl_id=' . $f_query['wl_ID'] . '" class = "btn btn-primary btn-sm"><span class = "fa fa-paste"></span> To Member</a></center></td>';
                        echo '</tr>';
                    };
                    ?>
                </tbody>
            </table>
 

Javascript внизу страницы содержит:

         $(document).ready(function () {
            $('#table').DataTable({
                "lengthChange": false,
                "pageLength": 12,
                "pagingType": "full_numbers",
                "order": [[3, "asc"]]
            });

            var table = $('#table').DataTable();
            $('#min, #max').keyup(function () {
                table.draw();
            });
        });
 

Часть функции keyup была скопирована из ссылки Datatables

Функция getage PHP является частью заголовка PHP

 function getAge($date) { // Y-m-d format
return intval(substr(date('Ymd') - date('Ymd', strtotime($date)), 0, -4));
 

Я все еще борюсь с javascript и ожидаю, что в этом и заключается проблема, но не вижу очевидной причины моей проблемы. Спасибо

Проблема связана с вашей getAge() функцией, и это должно быть очевидно, если вы посмотрите на столбец age в вашей таблице. Ваш код:

 function getAge($date) 
{ 
    return intval(substr(date('Ymd') - date('Ymd', strtotime($date)), 0, -4));
}
 

Функция PHP date() возвращает строку в формате 'YYYMMDD' . У вас их два, и вы их вычитаете. Предположим, что они есть '20190414' , и '20020321' их вычитание приведет к 170093 тому, что, взяв последние два символа с substr() , вы получите возраст 93 человека, родившегося в 2002 году. Вы этого не заметили?

Итак, давайте напишем лучшую getAge() функцию. Точная работа со временем затруднена. Однако на самом деле внутри PHP есть функция для вычисления различий в датах:

https://www.php.net/manual/en/datetime.diff.php

Если мы используем это для создания функции, мы получаем:

 function getAge($dateStr) 
{ 
    $birthDate = new DateTime($dateStr); // check the valid formats in the manual!
    $currentDate = new DateTime();
    return $birthDate->diff($currentDate, true)->y; // return difference in years
}
 

Эту функцию можно было бы записать в одну строку кода вместо трех, но это было бы сложнее прочитать, поэтому не делайте этого.

Это работает для вас? В вашем коде могут быть другие ошибки, хороший способ отладки ошибок Javascript — посмотреть на ваши инструменты разработчика.

Оказывается, мне нужно было изменить порядок, в котором я добавил внешние js-скрипты jquery / bootstrap / datatables.

Спасибо за вашу помощь.