Filtering columns in Datatables as used in AdminLTE

Filtering columns in Datatables as used in AdminLTE

frankjfrankj Posts: 8Questions: 2Answers: 0

I'm building a Laravel app with AdminLTE integrated in the backend. AdminLTE uses DataTables to generate the tables, this works fine. But in AdminLTE it's only possible to sort columns, and it's not possible to filter columns. In one admin view I want to filter columns with a dropdown as shown in this DataTables example. I've tried to integrate the example code in AdminLTE file main.js. But I haven't got it working. In main.js there is a codesnippet where probably the new code should or could be integrated.

$('.datatable').each(function () {
    if ($(this).hasClass('dt-select')) {
        window.dtDefaultOptions.select = {
            style: 'multi',
            selector: 'td:first-child'
        };

        window.dtDefaultOptions.columnDefs.push({
            orderable: false,
            className: 'select-checkbox',
            targets: 0
        });
    }
    $(this).dataTable(window.dtDefaultOptions);

});

Does anyone have an idea how to get the filtering working?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @frankj ,

    I assume you just need to add this after line 12:

            window.dtDefaultOptions.initComplete: function () {
                this.api().columns().every( function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );
     
                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );
     
                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
            }
    

    Cheers,

    Colin

  • frankjfrankj Posts: 8Questions: 2Answers: 0

    I've tried this already, but it gives errors on the first code rule. And the other functions in this code block don't work anymore. I've tried also to vary some things on the first rule, so that there are no errors anymore in the file, but I can't get it to work. Any idea's about changing the first rule?

  • allanallan Posts: 61,438Questions: 1Answers: 10,051 Site admin

    What errors is that code giving please? Can you link to a test case showing the issue please.

    Allan

  • frankjfrankj Posts: 8Questions: 2Answers: 0
    edited January 2019

    Linking to a testcase is a problem. I'm developing local, using VS Code, and editor signals two problems in the added code on this first row.
    window.dtDefaultOptions.initComplete: function () {
    The first is that instead of ':' ';' is expected. The second is at the function(), that an Identifier is expected.

    In browser console the first error gives a SyntaxError: Unexpected token ':'

    Hope that this will be some useful information.

  • allanallan Posts: 61,438Questions: 1Answers: 10,051 Site admin
    Answer ✓

    Use:

    window.dtDefaultOptions.initComplete = function () {
    

    Allan

  • frankjfrankj Posts: 8Questions: 2Answers: 0

    Thx. This works without errors. Also relevant is to put in the HTML view <tfoot></tfoot> with the table rows and columns (as also mentioned in the comments).

  • eems_developereems_developer Posts: 6Questions: 3Answers: 0

    I'm building a Laravel app with AdminLTE integrated in the backend. AdminLTE uses DataTables to generate the tables, this works fine. But in AdminLTE it's only possible to use common , and it's not possible to customize In one admin view I want toremove search page and customize button . I've tried to integrate the example code in AdminLTE file main.js. But I haven't got it working. In main.js there is a codesnippet where probably the new code should or could be integrated.

    var tableadvprim = $('#expenses_primary_table_exps_adv, #expenses_primary_table_setel_exps').DataTable({
    paging:false, bFilter : false,

    if ($(this).hasClass('dt-select')) {
    'columnDefs': [
    { orderable: false,
    className: 'select-checkbox',
    targets: 0
    }
    ],
    'select': {
    style: 'multi',
    selector: 'td:first-child'
    },

                  }
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    I answered on your other thread - please don't duplicate questions.

This discussion has been closed.