How do I use the dom function to hide search box?

Chazza

Hi
I understand accord to the following link I can use the dom function to hide the search box
[https://datatables.net/forums/discussion/22511/can-you-hide-the-search-box-without-disabling-searching]

Where is the dom function located please? is it buried within JavaScript somewhere? Have never used this before I am slightly lost as how to implement it?

Currently I set my table up with the script below. I want to keep the bit that lets me have the three search boxes below my table. I just want to permanently hide the main default search box. Thank you for your help
Chazza

  <script>
        var dataSet = %ALARMSTABLE%;

        $(document).ready(function () {

            // Setup - add a text input to each footer cell
            $('#altable tfoot th').each(function () {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="Search ' + title + '" />');
            });

            // DataTable
            var table = $('#altable').DataTable({                
                data: dataSet,                
                initComplete: function () {
                    // Apply the search
                    this.api().columns().every(function () {
                        var that = this;

                        $('input', this.footer()).on('keyup change clear', function () {
                            if (that.search() !== this.value) {
                                that
                                    .search(this.value)
                                    .draw();
                            }
                        });
                    });
                }
            });
         });
    </script>

kthorngren

The dom option is a Datatbles initialization option, not a function. It would go between lines 14 and 15, for example, in your code snippet.

Kevin

Chazza

Hi Kevin
Thanks for the head up on that
I added
"bFilter": false,
After line 14 and that removed the search box
Regards
Chazza

kthorngren

Setting searching (the current naming convention - same as bFilter) to false will disable searching using the API. If you still want search capabilities but want to remove the search input use the dom option.

Kevin

james8492

Add this code in internal ccs

.dataTables_filter{
display: none;
}

it's work properly

Straetling

Sorry for hijacking the thread, but I'm facing the same issue.

Using dom: 'lrtip' seems to be the correct way, and yes it works, but it renders the i and p below the table in 2 separate lines, which doesn't look good.

Using james8492's answer works better, but does not feel like a 'clean' solution - any suggestions how to make the 'clean' way work without rendering 2 separate divs?

tangerine

Put the i and p before the t (for "table").
Read up on the dom option here:
https://datatables.net/reference/option/dom

Straetling

I read the dom reference again, and found the bootstrap-option that I previously overlooked - thank you very much for the hint.

In case anyone ever has the same problem, this line worked for me (using bootstrap5):
dom: 'lrt"<\'row\'<\'col-sm-12 col-md-5\'i><\'col-sm-12 col-md-7\'p>>"'
- not showing the 'global' search box
- rendering i and p below the table, but in a single line (if there is not enough space, it will render in 2 separate lines)

allan

Its a pig isn't it! There will be a new layout option in DataTables 2 which will replace dom that will be so much easier to use!

That part is actually implement already, but there is a bunch of other stuff for DT2 that needs to be done before release. Ready when it is ready...

Thanks for posting your solution here.

Allan