How to show the searchbuilder button in footer

How to show the searchbuilder button in footer

sarooptrivedisarooptrivedi Posts: 45Questions: 15Answers: 2

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>

This question has an accepted answers - jump to answer

Answers

This discussion has been closed.