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

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

ChazzaChazza Posts: 10Questions: 4Answers: 0
edited March 2021 in Free community support

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>


This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • ChazzaChazza Posts: 10Questions: 4Answers: 0

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • james8492james8492 Posts: 1Questions: 0Answers: 0
    edited September 2021

    Add this code in internal ccs

    .dataTables_filter{
    display: none;
    }

    it's work properly

  • StraetlingStraetling Posts: 2Questions: 0Answers: 0

    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?

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

  • StraetlingStraetling Posts: 2Questions: 0Answers: 0
    edited July 2023

    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)

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

Sign In or Register to comment.