Fetch all the data from HTML table with Regex using Jquery

Question

I have a code which should filter data from HTML table based on conditions. i have around 200 records in my table and many of them is common name

so for example, i have a row with value "GowriLakshmi", so if i search "%Laksh%" it should display all the name with Laksh in between there names.

So currently i tried but am not getting it. it is not throwing me any error. but am not able to find logic for that. So can anyone help me on this.

attaching code:

 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>

So i know which regex to be used for that, but when i include that regex it is not working as expected. Am new to this web development, and i am still learning. So can someone of you help.

Answer 1

To filter the record with value you can pass the your searchTerm directly to search function of datatable.

Try this:

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();
});

For your reference: https://jsfiddle.net/sha4d6cm/