initComplete column filter not working while Datatable load with onClick event

MuktalMhx

Hi,
I am loading datatable on Onclick event from Ajax server side response. Everything is working fine but individual column filter not showing any data from the table. I try with hard but not get any solution for this.
Kindly help to find wheres the issue is.
Thanks in advance.

<input type = "button" id="customerSearchButton"  value = "Search" />

<table id="txnCur" class="display compact" cellspacing="0" style="width:100%">   

        <thead>   
           <tr>
                <th><label>Cycle Date</label></th>
                <th><label>Effective Date</label></th>
                <th><label>Posting Date</label></th>
                <th><label>Transaction Amount</label></th>
                <th><label>Payment Mode</label></th>
                <th><label>TXN Type</label></th>
                <th><label>TXN Code</label></th>
                <th><label>TXN Id/Ref No</label></th>
                <th><label>Group</label></th>
                <th><label>SubGroup</label></th>
                <th><label>TXN Description</label></th>
                <th><label>Billed Flag</label></th>
                <th><label>Settled Unsettled</label></th>
            </tr>
        </thead>                
    </table>

<script>
oTable = $("#txnCur").DataTable({
    data:[],             
    
    columns: [
                        { "data": "Cycle_Date" },
                        { "data": "Effective_Date" },
                        { "data": "Posting_Date" },
                        { "data": "Amount" },
                        { "data": "Paymentmode" },
                        { "data": "TXN_Type" },
                        { "data": "TXN_Code" },
                        { "data": "TXNId_RefNo" },
                        { "data": "Group" },
                        { "data": "SubGroup" },
                        { "data": "TXN_Description" },
                        { "data": "Billed_Flag" },
                        { "data": "Settled_Unsettled" }
                ],
            
        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>' )
                } );
            } );
        },
            
                    
    rowCallback: function (row, data) {},
    info: true,
    ordering: true,
    processing: true,
    retrieve: true,
          
    });


$("#customerSearchButton").on("click", function (event) {
   $.ajax({
                url: "PopulateTable",
                type: "GET",
        }).done(function (result) {
        
            oTable.clear().draw();
            oTable.rows.add(result).draw();
            
            }).fail(function (jqXHR, textStatus, errorThrown) { 
                  aler("Some error occured");
            });
});
</script>

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

You are initializing a blank Datatable. Thats ok but there is no data in the table for the code in initComplete to build the select options. Move that code to the success function of your ajax request.

Where you have this.api() you will need to change to use the oTable variable, for example: this.api().columns().every( function () { should be oTable.columns().every( function () {.

Kevin

MuktalMhx

Hi Kevin,
Thanks for quick response.
When I tried as suggested I am getting error as "Uncaught SyntaxError: Function statements require a function name" on initComplete: function () {

Below is my updated code.
Please provide your valuable input.

<script>
oTable = $("#txnCur").DataTable({
    data:[],            
     
    columns: [
                        { "data": "Cycle_Date" },
                        { "data": "Effective_Date" },
                        { "data": "Posting_Date" },
                        { "data": "Amount" },
                        { "data": "Paymentmode" },
                        { "data": "TXN_Type" },
                        { "data": "TXN_Code" },
                        { "data": "TXNId_RefNo" },
                        { "data": "Group" },
                        { "data": "SubGroup" },
                        { "data": "TXN_Description" },
                        { "data": "Billed_Flag" },
                        { "data": "Settled_Unsettled" }
                ],
             
                     
    rowCallback: function (row, data) {},
    info: true,
    ordering: true,
    processing: true,
    retrieve: true,
           
    });
 
 
$("#customerSearchButton").on("click", function (event) {
   $.ajax({
                url: "PopulateTable",
                type: "GET",
        }).done(function (result) {
         
            oTable.clear().draw();
            oTable.rows.add(result).draw();

            initComplete: function () {
            oTable.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>' )
                } );
            } );
        },
             
            }).fail(function (jqXHR, textStatus, errorThrown) {
                  aler("Some error occured");
            });
});
</script>

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

Please use Markdown formatting when posting code.

You want to move the code inside the initComplete function but not the initComplete function itself. Remove line 40 (initComplete: function () {) and line 56 (},) from your code.

Kevin

MuktalMhx

Hi Kevin,
Thanks for help. It's working fine.
But another issue cropped up. i.e every time I click on search button column filter append every time and first column filter shows blank values and new one displays value.
Below is my updated code.

Can you please suggest a solution.

$("#customerSearchButton").on("click", function (event) {
$.ajax({
url: "PopulateTable",
type: "GET",
}).done(function (result) {

        oTable.clear().draw();
        oTable.rows.add(result).draw();

        oTable.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>' )
            } );
        } );

        }).fail(function (jqXHR, textStatus, errorThrown) { 
              aler("Some error occured");
        });

});

kthorngren

Looks like you are basing your code on this example:
https://datatables.net/examples/api/multi_filter_select.html

It is using empty() to clear the element, .appendTo( $(column.footer()).empty() )). Looks like you need to do the same here.appendTo( $(column.header()))`.

Again please use markdown to format your code. This is shown in the input when you are posting:

Posts are formatted using Markdown. To highlight code, please use triple back ticks (```) on new lines before and after the code block.

Kevin

MuktalMhx

Thanks buddy. U made my day.
It's working like charm.