JSFiddle - React, Tailwind, and code Playground

by vahida

HTML

<!Doctype>
<html>
<head>

</head>
<body>

<table class="table table-bordered mytable" style="width:100%;">
            <thead class="reg_bg">
              <tr>
                  <th scope="col">column1</th>
                  <th scope="col">column2</th>
                  <th scope="col">column3</th>
                  <th>Action</th>
               </tr>
               </thead>
               <tbody>
                    <tr class="">
                        <td>1</td>
                        <td title="hello title">
                            Book1
                        </td>
                        <td>
                            <a href="#" data-qid="2" data-toggle="modal" data-target="#myModal">
                                Glenn</a>
                        </td>
                        <td>
                            <a href="www.google.com">
                                <button type="button" class="btn btn-primary">Detail</button>
                            </a>
                        </td>

                    </tr>
                     <tr class="">
                        <td>2</td>
                        <td title="hello title">
                            Book2
                        </td>
                        <td>
                            <a href="#" data-qid="3" data-toggle="modal" data-target="#myModal">
                                Nicole</a>
                        </td>
                        <td>
                            <a href="www.google.com">
                                <button type="button" class="btn btn-primary">Detail</button>
                            </a>
                        </td>

                    </tr>
              
                 </tbody>
          </table>
          
<script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>
</body>
</html>

JavaScript

$('.mytable').DataTable({
        "aLengthMenu":[[5,10,25,50,100,-1],[5,10,25,50,100,"All"]],
        "iDisplayLength":5,
        "initComplete": function () {
            $(this).find('thead tr').clone().find('th').each(function() {
                    while(this.attributes.length > 0) {
                        this.removeAttributeNode(this.attributes[0]);
                    }
              }).empty()
              .wrapAll('<tr/>').parent()
              .appendTo($(this).find('thead'));

            var current_table_head=$(this).find('thead');
            this.api().columns("th:not(:contains('Action'))").every( function () {
                var column = this;
                var select = $('<select style="width:100%;"><option value="">All</option></select>')
                    .appendTo( current_table_head.find("tr:eq(1) th").eq(column.index()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    var val = $('<div/>').html(d).text();
                    select.append($('<option>').val(val).text(val))
                } );
            } );
        }
    });