merge the button and search code

merge the button and search code

LucadatatablesLucadatatables Posts: 4Questions: 1Answers: 0

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); }); }); }, }); });

Answers

  • colincolin Posts: 15,140Questions: 1Answers: 2,586

    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

  • LucadatatablesLucadatatables Posts: 4Questions: 1Answers: 0

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

    i ask only like i can merge the the codes
    thanks

  • kthorngrenkthorngren Posts: 20,224Questions: 26Answers: 4,754

    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

  • LucadatatablesLucadatatables Posts: 4Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,224Questions: 26Answers: 4,754

    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

  • LucadatatablesLucadatatables Posts: 4Questions: 1Answers: 0
    edited January 13

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

  • kthorngrenkthorngren Posts: 20,224Questions: 26Answers: 4,754

    See if this thread helps.

    Kevin

Sign In or Register to comment.