【问题标题】:Fetch all the data from HTML table with Regex using Jquery使用 Jquery 使用正则表达式从 HTML 表中获取所有数据
【发布时间】:2021-08-03 11:36:52
【问题描述】:

我有一个代码应该根据条件从 HTML 表中过滤数据。我的表中有大约 200 条记录,其中许多是通用名称

例如,我有一个值为“GowriLakshmi”的行,所以如果我搜索“%Laksh%”,它应该显示所有名称之间带有 Laksh 的名称。

所以目前我尝试了但没有得到它。它没有给我任何错误。但我无法找到逻辑。所以任何人都可以帮我解决这个问题。

附上代码:

const table = $('#tblfiles');

$('#tblfiles').dataTable({
  'search': {
    'smart': false,
    'regex': true
  }
});

$('.dataTables_filter input').unbind().bind('keyup', function() {
  const searchTerm =  this.value.toLowerCase().replace(/,/g, '|').replace('%', '.*');
        var LastItem = ''
  var lastChar = searchTerm[searchTerm.length -1];
    if(lastChar == '|'){
        LastItem = (searchTerm.substring(0,searchTerm.length - 1));
  }
  //Regex to be used : -- > \wst\w* 

  const regex = '\\b(' + searchTerm + ')\\b';
  table.DataTable().rows().search(regex, true, false).draw();
});
body {
  font-size: 12px !important;
  padding: 2em;
}

.dataTables_length {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.1.7/chance.min.js"></script>
<link href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<div id="nam"></div>
<br>

<table id="tblfiles" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>111</td>
      <td>GowriLakshmi</td>
    </tr>
    <tr>
      <td>112</td>
      <td>Lakshmi</td>
    </tr>
    <tr>
      <td>113</td>
      <td>Paaru</td>
    </tr>
    <tr>
      <td>114</td>
      <td>michael</td>
    </tr>
    <tr>
      <td>115</td>
      <td>Mohammed</td>
    </tr>
    <tr>
      <td>1132</td>
      <td>Naziya</td>
    </tr>
    <tr>
      <td>1131</td>
      <td>Nazriya</td>
    </tr>
    <tr>
      <td>1131</td>
      <td>LakshKarthyayini</td>
    </tr>
  </tbody>
</table>

所以我知道要使用哪个正则表达式,但是当我包含该正则表达式时,它没有按预期工作。我是这个 web 开发的新手,我还在学习。你们当中有人可以帮忙吗?

【问题讨论】:

    标签: javascript html jquery regex filter


    【解决方案1】:

    要过滤带有值的记录,您可以将 searchTerm 直接传递给数据表的搜索功能。

    试试这个:

    const table = $('#tblfiles');
    
    $('#tblfiles').dataTable({
      'search': {
        'smart': false,
        'regex': true
      }
    });
    
    $('.dataTables_filter input').unbind().bind('keyup', function() {
    
      const searchTerm =  this.value.toLowerCase();  
    
      table.DataTable().rows().search(searchTerm).draw();
    });
    

    供您参考:https://jsfiddle.net/sha4d6cm/

    【讨论】:

    • 我也想要逗号分隔一个,例如我在表中有 200 个数据。所以我想使用逗号同时过滤多个数据。即使我给出逗号,它也应该过滤数据
    • 对于多数据搜索,您将搜索词和正则表达式更改为: const searchTerm = this.value.toLowerCase().replace(/,/g, '|'); const 正则表达式 = '^.*' + searchTerm + '\.*$';
    • 但是当我给逗号时,最后没有成功,它检索了我整个表数据
    • 您可以通过添加一个正则表达式来避免这种情况,如果逗号后面没有字符,它将删除逗号。试试这个:searchTerm.replace(/,\s*$/, "") jsfiddle.net/he4comxb
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-06-05
    • 2016-12-14
    • 2016-08-29
    • 2010-11-27
    • 2013-06-25
    • 2013-09-05
    • 2015-02-24
    相关资源
    最近更新 更多