Individual column searching after data is loaded.

syedfahadkhalid

function compPropsPremDisc() {  
    
    $.ajax({      
        url: "www.sample.com",
        type: "GET",
        headers: { "Accept": "application/json;odata=verbose" },  
        success: function (data) {

          var tableComp = $('#premTbl').DataTable();
            var propId = data.d.Id;

            var items = data.d.results;
            for (i=0; i<items.length; i++){
                let item1 = items[i];
                
                    tableComp.row.add( [
                item1.Property_x0020_ID.Title, 
                item1.Academic_x0020_Lease,
                item1.Academic_x0020_Lease_x0020_Comme, 
                item1.Floor_x0020_Premium, 
                item1.Floor_x0020_Premium_x0020_Commen, 
                item1.Semester_x0020_Lease, 
                item1.Semester_x0020_Lease_x0020_Comme, 
                item1.Other,
                item1.Other_x0020_Comments,
                dateFil(item1.Created)
                ] ).draw( false );
                }
             replaceNull('premTbl');
                //tableComp.initComplete();                         
        },
        error: function (data) {
           // alert('errorrrr');
            alert("Error in processing request " + data.success);
        },
        complete: function (data){
        
        }               
    });}

I am populating my data table like this,what i want to do is to apply "Individual column searching" after the data gets completly populated. I AM A NEW TO JQUERY and JS.
Is there any way to call " initComplete: function () " separately like creating the object of that table and calling the function.

syedfahadkhalid

$("#premTbl tfoot th").each( function ( i ) {
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(this).empty() )
                        .on( 'change', function () {
                            table.column( i )
                                .search( $(this).val() )
                                .draw();
                        } );
             
                    tableComp.column( i ).data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );

I have figured it out, this made my problem solved.