Refresh Individual column searching (select inputs)

CiccioFrizzo

Hi all,

i create a new function in js with ajax where i add a new row into my datatable when i scoll the page. The code is:

$(function newRow() {
var numberCol = column();
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()) {
$.ajax({
url: "/newRow",
global : false,
type: 'POST',
async : false,
contentType: "application/json; charset=utf-8",
cache: false,
success: function (data) {
for (var i = 0; i < data.length; i++) {
var row = new Array(numberCol.length);
for (var j = 0; j < numberCol.length; j++) {
var colDate = numberCol[j];
var insert = data[i][colDate];
row[j] = insert;
}
$('table').dataTable().fnAddData(row);
}
},
error: function (httpRequest, textStatus, errorThrown) {
alert("Status= " + textStatus + ",Error= " + errorThrown);
}
});
}
});
});

The function is ok, but the data that i put are not insert into my filter (filter is Individual column searching (select inputs)) at the top of my table.

Can someone help me?
Thank you very much.

CiccioFrizzo

i found this function:

                  $(document).ready(function() {
                      var table = $('#dataTable').DataTable();
                      $("#dataTable tfoot th").each( function ( i ) {
                          var select = $('<select><option value=""></option></select>') .appendTo( $(this).empty() ) .on( 'change', function () {
                                  var val = $(this).val();
                                  table.column( i ) .search( val ? '^'+$(this).val()+'$' : val, true, false ) .draw();

                          } );
                          table.column( i ).data().unique().sort().each( function ( d, j ) {
                              select.append( '<option value="'+row[j]+'">'+row[j]+'</option>' ) 
                          } );

                      } );

                  } );

but this function reset my filter and add the last row in every single box of my filter.
help me, please.
Thanks

CiccioFrizzo

The solution is:

                  $(document).ready(function() {
                      var table = $('#dataTable').DataTable();
                      $("#dataTable tfoot th").each( function ( i ) {
                          var select = $('<select><option value="">-- Tutti --</option></select>') .appendTo( $(this).empty() ) .on( 'change', function () {
                                  var val = $(this).val();
                                  table.column( i ) .search( val ? '^'+$(this).val()+'$' : val, true, false ) .draw();

                          } );
                          table.column( i ).data().unique().sort().each( function ( d, j ) {
                              select.append( '<option value="'+d+'">'+d+'</option>' ) 
                          } );

                      } );

                  } );

Discussion is closed