I have a problem with Datatable when active scrollX with column filter (search)

ASHKARdatatables

I have a problem with Datatable when active scrollX with column filter (search) i tried hard but nothing

image 1 : the search work fine if scrollx is disabled

image 2 : but the table is not scrollable from right to left or from left to right

image 3 : when i active scrollX

image 4 : column filter (search) is disabled and the table header change to that

image 5 : and the table scroll work fine .. !!!

image 6 : i want to active scrollX , column filter work fine , and change the table header to be like in the image

the code :

<script>
                            $(document).ready(function () {
                                // Initialize DataTable
                                var table = $('#dataTable').DataTable({
                                    // Enable searching
                                    searching: true,
                                    // // Enable horizontal scrolling
                                    // scrollX: true,
                                    // fixedHeader: true,
                                    // Enable export buttons
                                    dom: '<"dt-top-container"<l><"dt-center-in-div"B><f>r>t<ip>',
                                    //dom: 'Blfrtip',
                                    // dom: '<"dt-top-container"<"dt-left"<l>><"dt-center-in-div"B><"dt-right"f>>t<ip>',
                                    buttons: [{
                                        extend: 'excelHtml5',
                                        text: 'XLSX',
                                        title: $('title').text() + ' - ' + (new Date()).toLocaleString('en-US', {
                                            day: '2-digit',
                                            month: '2-digit',
                                            year: 'numeric',
                                            hour: '2-digit',
                                            minute: '2-digit'
                                        }).replace(/[\/\,\:]/g, '-'),
                                        filename: $('title').text() + '-' + (new Date()).toLocaleString('en-US', {
                                            day: '2-digit',
                                            month: '2-digit',
                                            year: 'numeric',
                                            hour: '2-digit',
                                            minute: '2-digit'
                                        }).replace(/[\/\,\:]/g, '-') + '.xlsx',
                                        exportOptions: {
                                            orthogonal: 'export',
                                            columns: ':not(:eq(4))'
                                        },
                                        customize: function (xlsx) {
                                            var sheet = xlsx.xl.worksheets['sheet1.xml'];
                                            $('row c[r^="C"]', sheet).attr('s', '0');
                                        }
                                    },
                                    {
                                        extend: 'copyHtml5',
                                        text: 'Copy',
                                        exportOptions: {
                                            columns: ':visible'
                                        }
                                    },
                                    {
                                        extend: 'csvHtml5',
                                        text: 'CSV',
                                        fieldSeparator: ',',
                                        decimalSeparator: '.',
                                        title: $('title').text(),
                                        filename: $('title').text() + '-' + (new Date()).toLocaleString('en-US', {
                                            day: '2-digit',
                                            month: '2-digit',
                                            year: 'numeric',
                                            hour: '2-digit',
                                            minute: '2-digit'
                                        }).replace(/[\/\,\:]/g, '-'),
                                        charset: 'utf-8',
                                        exportOptions: {
                                            columns: ':visible'
                                        }
                                    },
                                    ],
                                    // Add length menu options
                                    lengthMenu: [
                                        [25, 50, 100, -1],
                                        [25, 50, 100, "All"]
                                    ],
                                    // Set default page length
                                    pageLength: 25,


                                    "language": {
                                        "searchPlaceholder": "Search ...",
                                        "decimal": "",
                                        "emptyTable": "No Data..!!!",
                                        "info": "Show feom _START_ to _END_ from _TOTAL_",
                                        "infoEmpty": "No such data",
                                        "infoFiltered": "( Total _MAX_ )",
                                        "infoPostFix": "",
                                        "thousands": ",",
                                        "lengthMenu": "_MENU_",
                                        "loadingRecords": "Loading ...",
                                        "processing": "Processing ...",
                                        "search": "Search : ",
                                        "zeroRecords": "No result",
                                        "lengthMenu": "Show _MENU_ Per Page",
                                        "paginate": {
                                            "first": '>>',
                                            "last": '<<',
                                            "next": '>',
                                            "previous": '<'

                                        },
                                        "aria": {
                                            "sortAscending": ": activate to sort column ascending",
                                            "sortDescending": ": activate to sort column descending"
                                        }
                                    }
                                });

                                // Define array of column indexes that are searchable
                                var searchableColumns = [1, 2, 3]; 

                                // Add input fields for each searchable column
                                $('#dataTable thead th').each(function (index) {
                                    if (searchableColumns.includes(index)) {
                                        var title = $(this).text();
                                        $(this).html('<input type="text" class="form-control" placeholder="Search for ' + title +
                                            '">');
                                    }
                                });

                                // Apply input field search to each searchable column
                                table.columns().every(function (index) {
                                    if (searchableColumns.includes(index)) {
                                        var that = this;
                                        $('input', this.header()).on('keyup change clear', function () {
                                            if (that.search() !== this.value) {
                                                that.search(this.value).draw();
                                            }
                                        });
                                    }
                                });

                                // Apply global search
                                $('#global_filter').on('keyup change clear', function () {
                                    table.search(this.value).draw();
                                });
                            });
                        </script>

you can try the code

https://jsfiddle.net/BakBaka7a/absj38yd

any idea !!

kthorngren

When using scrollX Datatables clones the header and displays the cloned header. The table().header() API is used to access this header instead of the original which is now hidden. This example shows one way to do this:
https://live.datatables.net/cedayopa/1/edit

You will need to had the second header in the HTML and use a classname to define which columns to apply the search to.

Kevin

ASHKARdatatables

Thanks kthorngren

but how i can disable filter in first and last coulmns ?

kthorngren

As I said...

use a classname to define which columns to apply the search to.

For the columns you don't want to apply the search to remove the classname. For example:
https://live.datatables.net/cedayopa/215/edit

Kevin

ASHKARdatatables

i think i make it

       initComplete: function() {
            var api = this.api();
            // Setup - add a text input to each header cell
            $('.filterhead', api.table().header()).each(function(index) {
                if (index !== 0 && index !== (api.columns()[0].length - 1)) {
                    var title = $(this).text();
                    $(this).html('<input type="text" placeholder=" ' + title +
                        '" class="column_search" />');
                }
            });
        }

ASHKARdatatables

Thanks kthorngren

your answer was easier

ASHKARdatatables

the last thing

when active scroll x
the horizontal scroll bar show in the button, and i want to add horizontal scroll bar in the top of the table too

any idea ?

colin

This thread should help, it's asking the same thing,

Colin

ASHKARdatatables

thnaks Colin

unfortunately , it works fine for normat table not for datatable

kthorngren

Digging through the Stack Overflow links in the thread Colin posted I tried the one from this thread. It seems to work:
https://live.datatables.net/gibuyeyo/1/edit

Kevin

ASHKARdatatables

My mistake

it worket fine

thanks Colin and Kevin