Datatable - Individual Column Filter (SELECT)

bruck

Hi all,
I'm new here. I'm using so much datatable in a project, but I'm facing an issue.

Today I've tried to insert the individual column filter (SELECT) as per documentation, but is not working.

I've inserted the script in "fnInitComplete" part, and I've also inserted <tfoot></tfoot> in the HTML.

Right the results is to have the dropdown filled with the right elements, but, when I change the selected element, the "column.search( val ? '^'+val+'$' : '', true, false ).draw();" seems not working.

Thank you all for your help / support.

Here my full code:

var datatable;
function InitDataTable() {
// begin first table
datatable = $('#sample_1').DataTable({
'fnPreDrawCallback': function () {
jQuery('#loader').fadeIn();
},
'fnDrawCallback': function () {
jQuery('#loader').fadeOut();
},
'fnInitComplete': function () {
this.api().columns([0,1,2,3,4,5,6,7,8,9]).every( function () {
var column = this;
var select = $('<select><option>Seleziona filtro</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 ) {
                    if(column.search() === '^'+d+'$'){
                        select.append( '<option value="'+d+'" selected="selected">'+d+'</option>' )
                    } else {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    }
                });
        } );
  },
  'serverSide': true,
  'iDisplayLength': 15,
  bSortable: true,
  bStateSave: true,
  aaSorting: [[0, 'desc']],
  'lengthMenu': [
    [15, 25, 50, 100],
    [15, 25, 50, 100] // change per page values here
  ],
  'ajax': {
    url: '/company/datatable',
    type: 'POST',
    headers: {
      'Authorization': 'Bearer ' + $cookies.getObject('loginResult')['token']
    },
    error: function (response) {
      if (response.status === 401) {
        $window.location.assign('/');
      }
    }
  },
  aoColumnDefs: [
    {
      mData: 'COMP_CompanyCode',
      name: 'COMP_CompanyCode',
      aTargets: [0],
      orderData: [0, 0]
    },
    {
      mData: 'COMP_BusinessName',
      name: 'COMP_BusinessName',
      aTargets: [1],
      orderData: [1, 0]
    },
    {
      mData: 'COMP_NationCode',
      name: 'COMP_NationCode',
      aTargets: [2],
      orderData: [2, 0]
    },
    {
      mData: 'COMP_Address',
      name: 'COMP_Address',
      aTargets: [3],
      orderData: [3, 0]
    },
    {
      mData: 'COMP_Locality',
      name: 'COMP_Locality',
      aTargets: [4],
      orderData: [4, 0]
    },
    {
      mData: 'COMP_ZIP',
      name: 'COMP_ZIP',
      aTargets: [5],
      orderData: [5, 0]
    },
    {
      mData: 'COMP_Province',
      name: 'COMP_Province',
      aTargets: [6],
      orderData: [6, 0]
    },
    {
      mData: 'COMP_VAT',
      name: 'COMP_VAT',
      aTargets: [7],
      orderData: [7, 0]
    },
    {
      mData: 'COMP_TaxCode',
      name: 'COMP_TaxCode',
      aTargets: [8],
      orderData: [8, 0]
    },
    {
      mData: 'COMP_CurrencyCode',
      name: 'COMP_CurrencyCode',
      aTargets: [9],
      orderData: [9, 0]
    },
    {
      mData: 'COMP_CompanyCode',
      aTargets: [10],
      bSortable: false,
      className: "text-align-center",
      mRender: function (data, type, full) {
        var id = full["COMP_CompanyCode"];
        var html = '<a href="#/view-company/' + id + '"><i class="fa fa-eye font-blue"></i></a> ';
        html += '<a href="#/edit-company/' + id + '"><i class="fa fa-edit font-green"></i></a> ';
        html += '<a href="javascript:;" onclick="removeCompany(\'' + id + '\');" ><i class="fa fa-trash font-red"></i></a> ';
        return html;
      },
      orderData: [10, 0]
    }
  ]
});

}