реализовать функцию фильтра по дате в раскрывающемся списке

Question

Я пытаюсь отсортировать свои записи в таблице по дате, используя раскрывающийся список.Сегодня, последние 7 дней, последние 14 дней, последние 30 дней и последние 3 месяца.С # selectFilter1 & # selectFilter3 я уже сделал фильтр.К сожалению, я не могу отфильтровать по дате.# selectFilter2 будет использоваться для этого.Кто-нибудь может мне помочь?

Вот код:

admin.php

<div class="row">
    <div class="input-field col s3">
        <select id="selectFilter1" name="filter" required>
            <option id="Alle" value="" selected>Kein Filter</option>
            <option id="Geburtstagskarte" name="birthdaycard1" data-icon="images/birthdaycard1.jpg"
                    value="">Geburtstag
            </option>
            <option id="Osterkarte" name="eastern1" data-icon="images/eastern1.jpg" value="">Ostern</option>
            <option id="Weihnachtskarte" name="merrychristmas1" data-icon="images/merrychristmas1.jpg"
                    value="">Weihnachten
            </option>
        </select>
        <label>Filtern nach Kartentyp:</label>
        <div id="imagePreview"></div>
    </div>

    <div class="input-field col s3">
        <select id="selectFilter2" name="filter" required>
            <option id="Alle" value="" selected>Kein Filter</option>
            <option id="date1" name="sendedatum" data-icon="" value="">Heute</option>
            <option id="date2" name="sendedatum" data-icon="" value="">Letzte 7 Tage</option>
            <option id="date3" name="sendedatum" data-icon="" value="">Letzte 14 Tage</option>
            <option id="date4" name="sendedatum" data-icon="" value="">Letzte 30 Tage</option>
            <option id="date5" name="sendedatum" data-icon="" value="">Letzte 3 Monate</option>
        </select>
        <label>Filtern nach Sendedatum:</label>
        <div id="imagePreview"></div>
    </div>

    <div class="input-field col s3">
        <select id="selectFilter3" name="filter" required>
            <option id="Alle" value="" selected>Kein Filter</option>
            <option id="0" name="Ausstehend" data-icon="" value="">Pending</option>
            <option id="1" name="Verschickt" data-icon="" value="">Versendet</option>
        </select>
        <label>Filtern nach Status:</label>
        <div id="imagePreview"></div>
    </div>

    <div class="input-field col s3">
        <i class="material-icons prefix">search</i>
        <input id="icon_prefix" type="text" class="validate" onkeyup="search()">
        <label for="icon_prefix">Search</label>
    </div>

</div>
<form action="admin.php" method="post">
    <div class="table-wrapper">
        <div class="table-scroll">
            <table id="myTable">
                <tr>
                    <th>Kartentyp</th>
                    <th>Absender</th>
                    <th>Empfänger</th>
                    <th>Sendedatum</th>
                    <th id="smallCol">Verschickt</th>
                    <th id="smallCol">Bestätigung</th>
                    <th>Edit</th>
                </tr>

                <?php
                foreach ($result as $row) {
                    if ($row['Dispatched'] == 0) {
                        $dispatched = 'Pending';
                    } else {
                        $dispatched = 'Versendet';
                    }
                    ?>
                    <tr class="Alle <?php echo $row['Category']; ?> <?php echo $row['Dispatched']; ?> <?php echo $row['SendDate']; ?>">
                        <td><?php echo $row['Category']; ?></td>
                        <td><?php echo $row['Sender']; ?></td>
                        <td><?php echo $row['Receiver']; ?></td>
                        <td><?php echo $row['SendDate']; ?></td>
                        <td><?php echo $dispatched; ?></td>
                        <td>Placeholder</td>
                        <td width="15%"><input type="submit" name="delete_<?php echo $row['ID']; ?>" value="delete"
                                               onclick="return confirm('Eintrag wird gelöscht. Sind Sie sicher?')">
                            <input type="submit" name="viewDetail_<?php echo $row['ID']; ?>" value="details"></td>
                    </tr>
                    <?php
                }
                ?>
            </table>
        </div>
    </div>
</form>
</div>
<br>
</div>
</div>

<script type="application/x-javascript">

    function search() {
        var input, filter, table, tr, td, td1, td2, td3, td4, td5, i, cleanedFilter;
        input = document.getElementById("icon_prefix");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");

        cleanedFilter = filter

        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            td1 = tr[i].getElementsByTagName("td")[1];
            td2 = tr[i].getElementsByTagName("td")[2];
            td3 = tr[i].getElementsByTagName("td")[3];
            td4 = tr[i].getElementsByTagName("td")[4];
            td5 = tr[i].getElementsByTagName("td")[5];

            if (td) {
                cellContent = td.innerHTML.toUpperCase()
                cellContent1 = td1.innerHTML.toUpperCase()
                cellContent2 = td2.innerHTML.toUpperCase()
                cellContent3 = td3.innerHTML.toUpperCase()
                cellContent4 = td4.innerHTML.toUpperCase()
                cellContent5 = td5.innerHTML.toUpperCase()

                if (cellContent.indexOf(cleanedFilter) > -1 || cellContent1.indexOf(cleanedFilter) > -1 || cellContent2.indexOf(cleanedFilter) > -1 || cellContent3.indexOf(cleanedFilter) > -1 || cellContent4.indexOf(cleanedFilter) > -1 || cellContent5.indexOf(cleanedFilter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }

    // Filter Funktionen
    $('#selectFilter1').change(function () {
        $(".Alle").hide();
        $("." + $(this).find(":selected").attr("id")).show();
    });

    $('#selectFilter2').change(function () {
        $(".Alle").hide();
        $("." + $(this).find(":selected").attr("id")).show();
    });

    $('#selectFilter3').change(function () {
        $(".Alle").hide();
        $("." + $(this).find(":selected").attr("id")).show();
    });

</script>

Answer 1

Хорошо, я нашел решение.Это не красиво, я знаю, но это работает.

<div class="row">
    <div class="input-field col s3">
        <select id="selectFilter1" name="filter" required>
            <option id="Alle" value="" selected>Kein Filter</option>
            <option id="Geburtstagskarte" name="birthdaycard1" data-icon="images/birthdaycard1.jpg"
                    value="">Geburtstag
            </option>
            <option id="Osterkarte" name="eastern1" data-icon="images/eastern1.jpg" value="">Ostern</option>
            <option id="Weihnachtskarte" name="merrychristmas1" data-icon="images/merrychristmas1.jpg"
                    value="">Weihnachten
            </option>
        </select>
        <label>Filtern nach Kartentyp:</label>
        <div id="imagePreview"></div>
    </div>

    <div class="input-field col s3">
        <select id="selectFilter2" name="filter" required onchange="dateFilter()>
            <option id="Alle" value="" selected>Kein Filter</option>
            <option id="date1" name="sendedatum" data-icon="" value="">Heute</option>
            <option id="date2" name="sendedatum" data-icon="" value="">Letzte 7 Tage</option>
            <option id="date3" name="sendedatum" data-icon="" value="">Letzte 14 Tage</option>
            <option id="date4" name="sendedatum" data-icon="" value="">Letzte 30 Tage</option>
            <option id="date5" name="sendedatum" data-icon="" value="">Letzte 3 Monate</option>
        </select>
        <label>Filtern nach Sendedatum:</label>
        <div id="imagePreview"></div>
    </div>

    <div class="input-field col s3">
        <select id="selectFilter3" name="filter" required>
            <option id="Alle" value="" selected>Kein Filter</option>
            <option id="0" name="Ausstehend" data-icon="" value="">Pending</option>
            <option id="1" name="Verschickt" data-icon="" value="">Versendet</option>
        </select>
        <label>Filtern nach Status:</label>
        <div id="imagePreview"></div>
    </div>

    <div class="input-field col s3">
        <i class="material-icons prefix">search</i>
        <input id="icon_prefix" type="text" class="validate" onkeyup="search()">
        <label for="icon_prefix">Search</label>
    </div>

</div>
<form action="admin.php" method="post">
    <div class="table-wrapper">
        <div class="table-scroll">
            <table id="myTable">
                <tr>
                    <th>Kartentyp</th>
                    <th>Absender</th>
                    <th>Empfänger</th>
                    <th>Sendedatum</th>
                    <th id="smallCol">Verschickt</th>
                    <th id="smallCol">Bestätigung</th>
                    <th>Edit</th>
                </tr>

                <?php
                foreach ($result as $row) {
                    if ($row['Dispatched'] == 0) {
                        $dispatched = 'Pending';
                    } else {
                        $dispatched = 'Versendet';
                    }
                    ?>
                    <tr class="Alle <?php echo $row['Category']; ?> <?php echo $row['Dispatched']; ?> <?php echo $row['SendDate']; ?>">
                        <td><?php echo $row['Category']; ?></td>
                        <td><?php echo $row['Sender']; ?></td>
                        <td><?php echo $row['Receiver']; ?></td>
                        <td><?php echo $row['SendDate']; ?></td>
                        <td><?php echo $dispatched; ?></td>
                        <td>Placeholder</td>
                        <td width="15%"><input type="submit" name="delete_<?php echo $row['ID']; ?>" value="delete"
                                               onclick="return confirm('Eintrag wird gelöscht. Sind Sie sicher?')">
                            <input type="submit" name="viewDetail_<?php echo $row['ID']; ?>" value="details"></td>
                    </tr>
                    <?php
                }
                ?>
            </table>
        </div>
    </div>
</form>
</div>
<br>
</div>
</div>

<script type="application/x-javascript">

    function search() {
        var input, filter, table, tr, td, td1, td2, td3, td4, td5, i, cleanedFilter;
        input = document.getElementById("icon_prefix");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");

        cleanedFilter = filter

        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            td1 = tr[i].getElementsByTagName("td")[1];
            td2 = tr[i].getElementsByTagName("td")[2];
            td3 = tr[i].getElementsByTagName("td")[3];
            td4 = tr[i].getElementsByTagName("td")[4];
            td5 = tr[i].getElementsByTagName("td")[5];

            if (td) {
                cellContent = td.innerHTML.toUpperCase()
                cellContent1 = td1.innerHTML.toUpperCase()
                cellContent2 = td2.innerHTML.toUpperCase()
                cellContent3 = td3.innerHTML.toUpperCase()
                cellContent4 = td4.innerHTML.toUpperCase()
                cellContent5 = td5.innerHTML.toUpperCase()

                if (cellContent.indexOf(cleanedFilter) > -1 || cellContent1.indexOf(cleanedFilter) > -1 || cellContent2.indexOf(cleanedFilter) > -1 || cellContent3.indexOf(cleanedFilter) > -1 || cellContent4.indexOf(cleanedFilter) > -1 || cellContent5.indexOf(cleanedFilter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }

    // Filter Funktionen
    $('#selectFilter1').change(function () {
        $(".Alle").hide();
        $("." + $(this).find(":selected").attr("id")).show();
    });

    $('#selectFilter2').change(function () {
        $(".Alle").hide();
        $("." + $(this).find(":selected").attr("id")).show();
    });

    $('#selectFilter3').change(function () {
        $(".Alle").hide();
        $("." + $(this).find(":selected").attr("id")).show();
    });

function dateFilter() {
    var date1 = new Date(new Date().setDate(new Date().getDate() - 0)).toISOString().slice(0, 10);
    var date2 = new Date(new Date().setDate(new Date().getDate() - 7)).toISOString().slice(0, 10);
    var date3 = new Date(new Date().setDate(new Date().getDate() - 14)).toISOString().slice(0, 10);
    var date4 = new Date(new Date().setDate(new Date().getDate() - 30)).toISOString().slice(0, 10);
    var date5 = new Date(new Date().setDate(new Date().getDate() - 90)).toISOString().slice(0, 10);

    var ddl = document.getElementById("selectFilter2");
    var selectedValue = ddl.options[ddl.selectedIndex].value;

    var table, tr, td3, i;
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");

    for (i = 0; i < tr.length; i++) {
        td3 = tr[i].getElementsByTagName("td")[3];

        if (td3) {
            cellContent3 = td3.innerHTML.toUpperCase()

            if (selectedValue == "date1") {

                if (cellContent3 == date1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }

            if (selectedValue == "date2") {

                if (cellContent3 <= date1 && cellContent3 >= date2) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }

            if (selectedValue == "date3") {

                if (cellContent3 <= date1 && cellContent3 >= date3) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }

            if (selectedValue == "date4") {

                if (cellContent3 <= date1 && cellContent3 >= date4) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }

            if (selectedValue == "date5") {

                if (cellContent3 <= date1 && cellContent3 >= date5) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }

            if (selectedValue == "Alle") {
                tr[i].style.display = "";
            }
        }
    }
}

</script>