Javascript DataTables.js选择过滤器

我正在使用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>

---

我真的在与codepens和DataTables.js网站做斗争。任何建议或示例都会非常有用，我认为对于中间人来说没有太多帮助。

您可以通过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>

$=>{ var table=$'table'。数据表； $'willfiltertype'。关于'change'，函数{ table.searchthis.value.draw； }; $'willfiltercategory'。关于'change'，函数{ table.searchthis.value.draw； }; }; 1. 2. 3. A. B C 类型 名称 类别 1. 雷沃 A. 3. 雷沃 B 3. 雷沃 B 2. 雷沃 C

---

太棒了！非常感谢。有没有一种方法可以将它们链接起来，这样它就只显示同时具有每个选择的两个选定值的结果？@1960，当然，这是可能的。解释这两种选择的行为。它们的值将始终为常数对？如果是这样，那么为什么您需要这两个选项？最好创建一个新问题并完成这个问题。另外，你可以试着找到链式选择。@1960，谢谢你对我说一句好话，别忘了完全解释你想要的行为。应该从另一个select中选择什么值，在这种情况下，应该通过哪个值在DataTable中进行搜索。把一个新问题弄清楚，就像这一个一样，思考它背后的逻辑，你是对的，或者是1。不需要，否则我可以。使用类似于。再次感谢！

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

<?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>

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

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

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