How to show the searchbuilder button in footer

sarooptrivedi

I am new with this datatable library.
How to show the search builder button in gridtable footer?

below is my script

  <script type="text/javascript">
        $(document).ready(function () {
            var table = $('#example').DataTable({
                "ajax": {
                    "url": "/Company/AjaxHandler",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { data: "Name", "autoWidth": true },
                    { data: "Address", "autoWidth": true },
                    { data: "Town", "autoWidth": true },
                    { data: "EmployeesNumber", "autoWidth": true },
                    { data: "DateCreated", "autoWidth": true },
                    { data: "DateUpdated", "autoWidth": true }
                ],
                "scrollY": 200,
                "scrollX": true,
                colReorder: true,
                stateSave: true,
                dom: 'Blfrtip',
                //lengthMenu: [
                //    [10, 25, 50, -1],
                //    ['10 rows', '25 rows', '50 rows', 'Show all']
                //],
                "buttons": [
                /*  'pageLength',*/
                    'searchBuilder',
                    {
                        extend: 'colvis',
                        postfixButtons: ['colvisRestore']
                    },
                    {
                        extend: 'copy',
                        className: 'btn btn-dark rounded-0',
                        text: '<i class="far fa-copy"></i> Copy',
                        autoFilter: true,
                        sheetName: 'Exported data',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'excel',
                        messageTop: 'This is web portal grid export',
                        className: 'btn btn-dark rounded-0',
                        text: '<i class="far fa-file-excel"></i> Excel',
                        autoFilter: true,
                        sheetName: 'Exported data',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'pdf',
                        className: 'btn btn-dark rounded-0',
                        text: '<i class="far fa-file-pdf"></i> Pdf',
                        autoFilter: true,
                        sheetName: 'Exported data',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'csv',
                        className: 'btn btn-dark rounded-0',
                        text: '<i class="fas fa-file-csv"></i> CSV',
                        autoFilter: true,
                        sheetName: 'Exported data',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'print',
                        className: 'btn btn-dark rounded-0',
                        text: '<i class="fas fa-print"></i> Print',
                        autoFilter: true,
                        sheetName: 'Exported data',
                        exportOptions: {
                            columns: ':visible'
                        }
                    }
                ],
                columnDefs: [
                    {
                        targets: -1,
                        visible: false
                    }
                ]
            });

            table.buttons().container()
                .appendTo($('div.eight.column:eq(0)', table.table().container()));          
        });
    </script>

kthorngren

This example use searchBuilder.container() to place the Search Builder button where you like in the document. Change .prependTo(table.table().container()) to the appropriate jQuery method, appendTo() for example, and selector for the element to place the Search Builder button. Another example, note the div placed in the HTML after the table.
http://live.datatables.net/qowozopo/1/edit

Kevin