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 where selects would filter your DataTable:

$(()=>{
    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>