DataTables. js Выбор фильтров

Question

Я использую DataTables. js для создания очень простой таблицы, например так:

<table id="table">
    <thead>
        <tr>
            <th>Type</th>
            <th>Name</th>
            <th>Category</th>
        </tr>
    </thead>
    <tbody>

        <?php $query = 'SELECT * FROM tablename'; $total_query = "SELECT COUNT(1) FROM (${query}) AS combined_table"; $total = $wpdb->get_var( $total_query ); $results = $wpdb->get_results( $query.' ORDER BY name ASC ', OBJECT ); foreach ($results as $result) {; ?>

        <tr>
            <td><?php echo $result->type; ?></td>
            <td><?php echo $result->name; ?></td>
            <td><?php echo $result->category; ?></td>
        </tr>

        <?php };?>

    </tbody>
</table>

Это хорошо работает, но мне нужно создать два независимых раскрывающихся списка на странице, которые фильтруют столбцы 1 (Тип ) и 3 (категория). Примерно так ...

<select id="willfiltertype">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select id="willfiltercategory">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

Вот мой JS

$(document).ready(function () {
    $('#table').DataTable();
});

Я действительно борюсь с кодами и DataTables. js сайтами. Я думаю, что любые предложения или примеры действительно помогли бы и были бы полезны здесь, поскольку для людей, которые являются промежуточными звенами, не так много.

Answer 1

Вы можете создать эти выборки с помощью PHP:

<?php 
    $query = 'SELECT * FROM tablename'; 
    $total_query = "SELECT COUNT(1) FROM (${query}) AS combined_table"; 
    $total = $wpdb->get_var( $total_query ); 
    $results = $wpdb->get_results( $query.' ORDER BY name ASC ', OBJECT ); 
?>

<select id="willfiltertype">
        <option value=" "> </option> 
    <?php foreach ($results as $result): ?>
        <option value="<?= $result->type; ?>"><?= $result->type; ?></option> 
    <?php endforeach; ?>
</select>

<select id="willfiltercategory">
        <option value=" "> </option> 
    <?php foreach ($results as $result): ?>
        <option value="<?= $result->category; ?>"><?= $result->category; ?></option> 
    <?php endforeach; ?>
</select>

<table id="table">
    <thead>
        <tr>
            <th>Type</th>
            <th>Name</th>
            <th>Category</th>
        </tr>
    </thead>
    <tbody>

        <?php foreach ($results as $result): ?>

        <tr>
            <td><?= $result->type; ?></td>
            <td><?= $result->name; ?></td>
            <td><?= $result->category; ?></td>
        </tr>

        <?php endforeach; ?>

    </tbody>
</table>

И затем вы можете создать JS, где выборки будут фильтровать вашу таблицу данных :

$(()=>{
    var table = $('#table').DataTable();

    $('#willfiltertype').on('change', function(){
       table.search(this.value).draw();   
    });

    $('#willfiltercategory').on('change', function(){
       table.search(this.value).draw();   
    });
});

$(()=>{
    var table = $('#table').DataTable();

    $('#willfiltertype').on('change', function(){
       table.search(this.value).draw();   
    });

    $('#willfiltercategory').on('change', function(){
       table.search(this.value).draw();   
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script> 

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"> 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"> 

<select id="willfiltertype">
    <option value=" "> </option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select>

<select id="willfiltercategory">
        <option value=" "> </option> 
        <option value="A">A</option> 
        <option value="B">B</option> 
        <option value="C">C</option>  
</select>

<table id="table">
    <thead>
        <tr>
            <th>Type</th>
            <th>Name</th>
            <th>Category</th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td>1</td>
            <td>rwerwer</td>
            <td>A</td>
        </tr>
        <tr>
            <td>3</td>
            <td>rwerwer</td>
            <td>B</td>
        </tr>
        <tr>
            <td>3</td>
            <td>rwerwer</td>
            <td>B</td>
        </tr>
        <tr>
            <td>2</td>
            <td>rwerwer</td>
            <td>C</td>
        </tr>

    </tbody>
</table>