jQuery dataTable 搜索值“活动”不起作用

Posted 2023-05-08

【中文标题】jQuery dataTable 搜索值“活动”不起作用

【英文标题】：jQuery dataTable search value 'Active' not working

【发布时间】：2019-01-18 01:20:31

【问题描述】：

美好的一天！我在 jquery dataTable 搜索栏中搜索字符串单词“Active”时遇到问题。如果我更改“非活动”一词的搜索栏。该表将过滤。但是，它似乎不适用于字符串“Active”。

这是所有数据：

当我搜索不活动时 当我搜索活动

表格代码：

<table class="table table-hover table-bordered" id="table1">
                                <thead>
                                    <tr>
                                        <th>Faculty Code</th>
                                        <th>Last Name</th>
                                        <th>First Name</th>
                                        <th>Middle Name</th>
                                        <th>Position</th>
                                        <th></th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php  while ($row = $result -> fetch_object()): ?>
                                    <tr>
                                        <td><?php echo $row->Faculty_ID;?></td>
                                        <td><?php echo $row->Faculty_Lastname ;?></td>
                                        <td><?php echo $row->Faculty_Firstname ;?></td>
                                        <td><?php echo $row->Faculty_Middlename;?></td>
                                        <td><?php echo $row->Position; ?></td>
                                        <td class="text-center">
                                            <a  class="btn btn-sm btn-outline-primary text-muted" href="Faculty_edit.php?Faculty_ID=<?php echo $row->Faculty_ID;?>">Edit</a>

                                            <a  data-fid="<?php echo  $row->Faculty_ID;?>" title="Delete Faculty" data-toggle="modal" data-target="#delete_modal"  class="btn btn-sm btn-outline-danger delete-faculty-btn text-muted" >Delete</a>
                                        </td>

                                        <td>
                                            <?php if($row->Status=='Active') echo '<a href="#deactive_account" data-toggle="modal" data-id='.$row->Faculty_ID.' class="activate" style="color:green;">Active</a>'; ?>
                                            <?php if($row->Status=='Inactive') echo '<a href="#active_modal" data-toggle="modal" data-id='.$row->Faculty_ID.' class="activate" style="color:red;">Inactive</a>'; ?>
                                        </td>
                                    </tr>
                                    <?php endwhile; ?>
                                </tbody>
                            </table>

jQuery 代码：

<script>
    $('#table1').DataTable(
    order: [],
    columnDefs: [  orderable: false, targets: [5]  ]
    );
</script>

【问题讨论】：

jquery 数据表搜索不完全匹配，但匹配包含这就是为什么活动与活动以及非活动匹配的原因。

知道如何过滤它吗？

请参考***.com/questions/8609577/…

我是 jQuery 新手，如何编写此代码：oTable.fnFilter( "^"+TERM+"$", COLUMN , true);

请查看我下面的帖子

【参考方案1】：

$(function()
var table1 = $('#table1').DataTable(
        order: [],
        "oSearch": "bSmart": false, // disable smart search
        columnDefs: [  orderable: false, targets: [5]  ]
        );
 $('#table1_wrapper input[type=search]').on( 'keyup click', function () 
      table1
        .column('6')
        .search( "^" + this.value, true, false, true )
        .draw();
    );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" rel="stylesheet"/>
<table class="table table-hover table-bordered" id="table1">
                                <thead>
                                    <tr>
                                        <th>Faculty Code</th>
                                        <th>Last Name</th>
                                        <th>First Name</th>
                                        <th>Middle Name</th>
                                        <th>Position</th>
                                        <th></th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                    <tr>
                                        <td>1</td>
                                        <td>lastname1</td>
                                        <td>FirstName1</td>
                                        <td>Middlename1</td>
                                        <td>Manager</td>
                                        <td class="text-center">
                                            <a  class="btn btn-sm btn-outline-primary text-muted" href="#">Edit</a>

                                            <a  data-fid="" title="Delete Faculty" data-toggle="modal" data-target="#delete_modal"  class="btn btn-sm btn-outline-danger delete-faculty-btn text-muted" >Delete</a>
                                        </td>

                                        <td>
                                            <a href="#deactive_account" data-toggle="modal" class="activate" style="color:green;">Active</a>
                                        </td>
                                    </tr>
									<tr>
                                        <td>2</td>
                                        <td>lastname2</td>
                                        <td>FirstName3</td>
                                        <td>Middlename4</td>
                                        <td>Manager</td>
                                        <td class="text-center">
                                            <a  class="btn btn-sm btn-outline-primary text-muted" href="#">Edit</a>

                                            <a  data-fid="" title="Delete Faculty" data-toggle="modal" data-target="#delete_modal"  class="btn btn-sm btn-outline-danger delete-faculty-btn text-muted" >Delete</a>
                                        </td>

                                        <td>
											<a href="#active_modal" data-toggle="modal" class="activate" style="color:red;">Inactive</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

您可以尝试以下代码，其中搜索将仅限于最后一列，请参阅 Datatable API 文档了解更多详情

【讨论】：

它说.. DataTables 警告：table id=table1 - 无法重新初始化 DataTable。

您无需再次调用.DataTable，只需在您的代码中添加oSearch 部分

我已经更新了帖子，但列搜索将仅限于第 6 列

非常感谢@Bhushan Kawadkar！

我可以搜索所有列吗？