merge the button and search code

Lucadatatables

Kindly, how can I merge the button and search code? the errors are that it can't be initialized or it won't run it for me. Thank you

$(document).ready(function() {
    var table = $('#emp-table').DataTable( {
        lengthChange: false,
        buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
    } );
 
    table.buttons().container()
        .appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );









$(document).ready(function () {
    
    // Setup - add a text input to each footer cell
    $('#emp-table thead tr')
        .clone(true)
        .addClass('filters')
        .appendTo('#emp-table thead');

        
        orderCellsTop: true,
        fixedHeader: true,
        initComplete: function () {
            var api = this.api();
 
            // For each column
            api
                .columns()
                .eq(0)
                .each(function (colIdx) {
                    // Set the header cell to contain the input element
                    var cell = $('.filters th').eq(
                        $(api.column(colIdx).header()).index()
                    );
                    var title = $(cell).text();
                    $(cell).html('');
 
                    // On every keypress in this input
                    $(
                        'input',
                        $('.filters th').eq($(api.column(colIdx).header()).index())
                    )
                        .off('keyup change')
                        .on('change', function (e) {
                            // Get the search value
                            $(this).attr('title', $(this).val());
                            var regexr = '({search})'; //$(this).parents('th').find('select').val();
 
                            var cursorPosition = this.selectionStart;
                            // Search the column for that value
                            api
                                .column(colIdx)
                                .search(
                                    this.value != ''
                                        ? regexr.replace('{search}', '(((' + this.value + ')))')
                                        : '',
                                    this.value != '',
                                    this.value == ''
                                )
                                .draw();
                        })
                        .on('keyup', function (e) {
                            e.stopPropagation();
 
                            $(this).trigger('change');
                            $(this)
                                .focus()[0]
                                .setSelectionRange(cursorPosition, cursorPosition);
                        });
                });
        },
    });
});

colin

I'm not sure if that's a cut&paste error, but you have DataTables initialisation options dangling from line 29 onwards.

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Colin

Lucadatatables

error DataTables warning: table id=emp-table - Cannot reinitialise DataTable.

i ask only like i can merge the the codes
thanks

kthorngren

When you combine them you need to make sure you add the comma separator between the options, for example:

    var table = $('#emp-table').DataTable( {
        lengthChange: false,
        buttons: [ 'copy', 'excel', 'pdf', 'colvis' ],  // Added comma to separate teh options
        orderCellsTop: true,
        fixedHeader: true,
        initComplete: function () {
            var api = this.api();
  
            // For each column
            api
                .columns()
                .eq(0)
                .each(function (colIdx) {
                    // Set the header cell to contain the input element
                    var cell = $('.filters th').eq(
                        $(api.column(colIdx).header()).index()
                    );
                    var title = $(cell).text();
                    $(cell).html('');
  
                    // On every keypress in this input
                    $(
                        'input',
                        $('.filters th').eq($(api.column(colIdx).header()).index())
                    )
                        .off('keyup change')
                        .on('change', function (e) {
                            // Get the search value
                            $(this).attr('title', $(this).val());
                            var regexr = '({search})'; //$(this).parents('th').find('select').val();
  
                            var cursorPosition = this.selectionStart;
                            // Search the column for that value
                            api
                                .column(colIdx)
                                .search(
                                    this.value != ''
                                        ? regexr.replace('{search}', '(((' + this.value + ')))')
                                        : '',
                                    this.value != '',
                                    this.value == ''
                                )
                                .draw();
                        })
                        .on('keyup', function (e) {
                            e.stopPropagation();
  
                            $(this).trigger('change');
                            $(this)
                                .focus()[0]
                                .setSelectionRange(cursorPosition, cursorPosition);
                        });
                });
        },
    } );

Kevin

Lucadatatables

thanks but do not work button and also multi filter select
https://live.datatables.net/gaqoqaco/1/edit

kthorngren

You didn't make the changes I suggested. I updated your test case:
https://live.datatables.net/gaqoqaco/2/edit

Note that I used the Download Builder to get the buttons and Bootstrap code needed for the test case to run properly.

Kevin

Lucadatatables

kthorngren thanks a lot.....
i'm new and i sorry.
I want only try to select column filter (not last)
and append filter header

kthorngren

See if this thread helps.

Kevin