针对数据表上的单列上的选择eption滤波器

发布于 2025-02-12 22:49:45 字数 3655 浏览 2 评论 0原文

我希望仅在DataTable上的目标列中进行选择的选项过滤器。

目前,它们针对整个数据表。您可以从此图像中看到,如果该文本恰好存在于其他列中,则可能会抛出不正确的值。

html

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>


<div class="select">
    <select id="age">
        <option value="">- Select -</option>
        <option value="Tokyo">Tokyo</option>
        <option value="Edinburgh">Edinburgh</option>
    </select>
</div>

<div class="select">
    <select id="position">
        <option value="">- Select -</option>
        <option value="accountant">Accountant</option>
        <option value="system architect">System Architect</option>
    </select>
</div>


<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>System Architect</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011-07-25</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>System Architect</td>
            <td>Accountant Land</td>
            <td>66</td>
            <td>2009-01-12</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Accountant</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012-03-29</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008-11-28</td>
            <td>$162,700</td>
        </tr>
    </tbody>
</table>

javascript

<script>
    $(document).ready(function () {
        var oTable = $('#example').dataTable();
        $('select#age').change(function () { oTable.fnFilter($(this).val()); });
        $('select#position').change(function () { oTable.fnFilter($(this).val()); });
    });
</script>

可能的解决方案应考虑到我的实际数据将从Python中获取,以成为烧瓶应用程序的一部分。

可能的解决方案应考虑到我的实际数据将从Python中删除,以成为烧瓶应用程序的一部分。

I'm looking to make my select option filter only in targeted columns on a datatable.

At the moment, they target the whole datatable. You can see from this image, that this could throw up an incorrect value if that text happened to exist in a different column.

enter image description here

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>


<div class="select">
    <select id="age">
        <option value="">- Select -</option>
        <option value="Tokyo">Tokyo</option>
        <option value="Edinburgh">Edinburgh</option>
    </select>
</div>

<div class="select">
    <select id="position">
        <option value="">- Select -</option>
        <option value="accountant">Accountant</option>
        <option value="system architect">System Architect</option>
    </select>
</div>


<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>System Architect</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011-07-25</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>System Architect</td>
            <td>Accountant Land</td>
            <td>66</td>
            <td>2009-01-12</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Accountant</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012-03-29</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008-11-28</td>
            <td>$162,700</td>
        </tr>
    </tbody>
</table>

JavaScript

<script>
    $(document).ready(function () {
        var oTable = $('#example').dataTable();
        $('select#age').change(function () { oTable.fnFilter($(this).val()); });
        $('select#position').change(function () { oTable.fnFilter($(this).val()); });
    });
</script>

Possible solutions should take into account that my actual data will be pulled in from python to be part of a flask app.

Possible solutions should take into account that my actual data will be pulled in from python to be part of a flask app.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文