时间戳

首页 > 解决方案 > 在表 jquery 中搜索和过滤项目

javascript - 在表 jquery 中搜索和过滤项目

问题描述

我有这个表，我想做的是通过电子邮件和名称搜索，所以当我输入one它时应该开始过滤掉我对 jquery 很陌生，这可以做一些我不想使用 ajax 加载它的方法吗

<input  id="searchme" name="searchme"  type="text" class="form-control">
    <table>
      <thead>
                <tr>               
                    <th>name</th>
                    <th>Email</th>
                    <th>Status</th>             
                    <th>Date</th>
                </tr>
                </thead>
          <tbody>
               <tr>
                  <td> Nameone</td>
                  <td> oneName@email.com</td>
                </tr>
                 <tr>
                  <td> NameTwpo</td>
                  <td> twoName@email.com</td>
                </tr>
         </tbody>
         </table>


       $(document).on('keyup', '#searchme', function () {

        });

标签： javascriptjqueryhtml

解决方案

看到您正在使用 jQuery，我建议您使用一些久经考验的东西，例如DataTables。它有许多优点，例如移动响应式设计、排序和过滤等。

按照他们的指示：

包括 CSS：

//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css

包括 JS：

//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js

初始化数据表：

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

除非这是学习如何进行搜索的练习，否则我认为没有必要“重新发明轮子”。

更新#1

根据您的评论，默认情况下应启用搜索，但如果不是，您可以明确告诉它启用搜索：

$('#my-table').DataTable({
    "searching": true
});

阅读材料

搜索

推荐阅读