JSFiddle - React, Tailwind, and code Playground

by Faisal Khan Janjua

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
<input type="text" id="srch" />

<table id="example">
    <thead>
        <tr>
            <th>Field</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>03015171335</td>
        </tr>
        <tr>
            <td>03456781212</td>
        </tr>
        <tr>
            <td>03049871345</td>
        </tr>
        <tr>
            <td>03228971345</td>
        </tr>
        
    </tbody>
</table>

JavaScript

var dt;
$(document).ready(function() {
  dt = $('#example').DataTable({
  	aaSorting: [] // disable default sorting on first column
  });
  $(document).on('keyup', '#srch', function(){
    dt.column(0).search("^" + $(this).val(), true, true).draw();
    dt.column(0).search('/345/$', true, true).draw();
  });
});