How to hide Datatables search bar?

Question

I've a custom search bar built into my website, and I wanted to hide the default Datatables search bar, I still need the search function but without the default search...

I've tried to hide the default search bar by using CSS, but it didn't work I also tried to disable bInfo and bFilter but it will disable the search function completely...

Here is some code:

<script>
        var oTable = $('#players_tools').DataTable({
            paging: false,
            info: false,
            //searching: hide...
        });
        $('#players_search_tool').keyup(function() {
            oTable.search($(this).val()).draw();
        });
    </script>

Nijat Mursali · Accepted Answer · 2022-11-25T22:58:39.210

If you check the example you can see that it contains

<div id="example_filter" class="dataTables_filter"

you can use

$(".dataTables_filter").hide();

to hide that part.

Let's try it:

$(document).ready(function () {
    $('#example').DataTable();
    $(".dataTables_filter").hide();
});

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css">

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011-04-25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011-07-25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009-01-12</td>
                <td>$86,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>

Thanks I used a similar solution, I used the class "dataTables_filter" in my CSS and set it to display: none in my actual HTML because for some reason it doens't work if i put the same code in a external CSS file — imnesslol, Nov 26 '22 at 13:41

How to hide Datatables search bar?

1 Answers1