initComplete function not working in .dataTable

initComplete function not working in .dataTable

Muhammad IzzatMuhammad Izzat Posts: 22Questions: 10Answers: 0

Hi, Im trying to add multiple select filter using initComplete function as from this example https://datatables.net/examples/api/multi_filter_select.html, but the code is not executed at all when i run my program, its not throwing any error as well. even alert or console.log is not displaying. What is the issue exactly?

Here's my code

content_table = $('#project-content-datatable').dataTable({
        dom: 'Blfrtip',
        JQueryUI: true,
        bPaginate: false,
        sScrollX: "100%",
        scrollY: '200vh',
        scrollCollapse: true,
        paging: false,
        destroy: true,
     initComplete: function () {
            alert( 'DataTables has finished its initialisation.' );
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.header()) )
                    .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>' )
                } );
            } );
        },

        columnDefs: [
            {width: 1, targets: 0},
            {width: 1, targets: 1},
        ],
        responsive: false,
        select: true,
        buttons: getDataTableButtons(),
        ajax: {
            url: content_path,
            dataSrc: ''
        },
        columns: [
            {"data": "id", "class": "content_id id_padding-right ", "width": "5px"},
            {
                "data": "thumb",
                "class": "preview_padding-right ",
                "visible": false,
                "render": function (data, type, row) {
                    return `<a href=` + data + ` data-fancybox> <img onerror="this.src='/media/dashboard/default/photo.png'" src=` + data + ` width="80" height="45"> </a>`;
                }
            },
            {"data": "parent", "visible": false},
            {"data": "name", "class": "content_name", "visible": true},
            {"data": "description", "class": "content_description", "visible": true},
            {
                "data": "category", "class": "", "visible": true, "render": function (data, type, row) {
                if (data != null) {
                    return data.name;
                }
                else {
                    return 'None';
                }
            }
            },
            {"data": "creation_time", "visible": false},
            {
                "data": null, "class": "content_duration ", "visible": true, "render": function (data, type, row) {

                // return get_duration(data);
                return 0;
            }
            }
        ]
    });

but if seperate the initComplete .DataTable function it will work. below is the code

$('#project-content-datatable').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.header()) )
                    .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>' )
                } );
            } );
        }
    });

It append the select field to each of the column header , BUT it cannot find any column data for it to append the into the field.
can anyone help me with this? any help is much appreciated

Answers

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    It seems to work no problem here: http://live.datatables.net/jitofagi/1/edit .

    Can you link to a test case showing the issue please.

    Thanks,
    Allan

  • Muhammad IzzatMuhammad Izzat Posts: 22Questions: 10Answers: 0

    Hi @allan thanks for your reply, This is my test case live.datatables.net/vetoqude/1/edit, but in here it work perfectly fine, but its not working in my code, its exactly the same code, and I have the right datatable.js. I'm puzzled with this as well.

    my content_table = $('#project-content-datatable').dataTable({}) is just as above, when I declare the initComplete in there, its not working at all. so i had to create another function $('#project-content-datatable').DataTable({}). In here i can create the select fields to each column but it can't detect any of the table column for it to get the data to append in the field.

    My code is as in my question, so I have both the .dataTableand .DataTable in my code

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    Please read the first FAQ here:
    https://datatables.net/faqs/index#Most-common-FAQs

    Kevin

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    There is no difference between the parameters that can be used for both $().DataTable() and $().dataTable(). The difference is the returned value as per the FAQ Kevin linked to.

    If it isn't working for you, we'd need a link to a page showing the issue.

    Allan

  • Muhammad IzzatMuhammad Izzat Posts: 22Questions: 10Answers: 0

    I see, thanks for the tips, i found out that initComplete function stop working when I added

     ajax: {
                url: content_path,
                dataSrc: ''
            },
    

    My apologies for not being able to provide a working test.

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    That won't make any difference to initComplete working or not. In fact it is most useful when ajax is used.

    Allan

  • Muhammad IzzatMuhammad Izzat Posts: 22Questions: 10Answers: 0

    I see, thank you for your time Allan, apologies for the amateur question.

  • YaniYani Posts: 24Questions: 7Answers: 0

    I have the exact same issue.

    My ajax handler is different though, but it works perfectly except that initComplete isn't fired:

    ajax: async function (data, callback, settings) {
        $(document).one('allTasksLoaded.scheduling', function () {
            callback({ data: _.toArray(scheduling.tasks.all) });
        });
    },
    

    Everything works when I remove the ajax option

  • pgorbaspgorbas Posts: 13Questions: 3Answers: 0

    Allan, I don't know if your example (posted Sep 2017) ever worked,
    but if you run it now it just proves the problem, your initComplete function is never fired and the console remains empty...

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    For the example Allan posted you need to look at the browser's console not the Console tab of JSBIN.

    Kevin

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

    It should work in both - see screenshot here of that example for me.

This discussion has been closed.