javascript DataTables：obtener valores de columnas para crear filtros

Posted 2021-05-04

// Escape regex (for column filtering)
var _re_escape_regexCustom = new RegExp( '(\\' + [ '/', '.', '*', '+', '?', '(', ')', '[', ']', '{', '}', '\\', '$', '^', '-' ].join('|\\') + ')', 'g' );
function escapeRegexCustom(val) {
  return val.replace(_re_escape_regexCustom, '\\$1');
};

// por ejemplo podemos ejecutarlo en el hook 'initComplete' de la datatable 
initComplete: function (e, settings) {
  
  var columnValues = [];

  var columnIndex = [6];
  var columnsIndexes = [1, 3];

  var table = this.api();
  var column = table.column(columnIndex); //acceder a una columna
  var columns = table.columns([1, 3]); //acceder a varias columnas

  //console.log(column);
  //console.log(columns);

  //console.log(column.data()); // column.data() solo se muestra como array de datos si no hemos modificado los valores con 'render functions' a la hora de presentarlos. Si no, son objetos con todos los datos de la row, con lo cual tendriamos que acceder manualmente a la propiedad deseada (ver mas abajo)

  //console.log(column.nodes()); // column.nodes() accede al nodo <td> con lo cual podemos obtner el innerHTML o text de cada celda de la columna, para casos en los que estemo usando 'render functions'
  column.nodes().each(function(item, index) {
    //console.log(item.innerHTML);
    //console.log(item.text);
    //console.log($(item).find('a').text());
  });

  column.each(function() { // una columna
  //columns.eq(0).each(function() { // varias columnas
    var column = this;

    column.data().unique().sort().each(function (d, j) { 
      //console.log(d); // d son los datos de toda la row (PERO OJO, SI HEMOS USADO FILTROS DE DISPLAY, ETC se muestra el dato original, no el de display)

      // si no hemos modificado los datos de las rows con 'render functions', podemos acceder directamente al dato
      console.log(d);

      // si hemos usado 'render functions', 'd' es un objeto conteniendo los datos de toda la row:
      //console.log(d.Ipda); // si queremos acceder a un dato concreto
      var cells = Object.values(d); //si queremos acceder a un dato del array by index: Object.keys accede a los 'labels', Object.values a los values
      console.log(cells[columnIndex]); // acceder al dato by index

      // rellenamos el array de values de la columna
      columnValues.push(d);
      //columnValues.push(cells[columnIndex]);
    });
  });


  // ------- a partir de aqui iria el filtro
  // OJO PARA QUE FUNCIONEN LOS FILTROS, en la configuracion de la dataTable no tenemos que tener 'searchng: false' !!
  
  var wrapperForSelect = $('[data-js="custom-table-filters"]');
  // creamos el select
  var select = $('<select multiple="multiple"><option value="Select..."></option></select>')
    .appendTo(wrapperForSelect)
    .on('change', function() {
      
      var self = $(this);
      var val = self.val();

      if(val !== null){
        val = val.join("|");
      } else {
        val = '';
      }
      console.log(val);

      // la funcion nativa $.fn.dataTable.util.escapeRegex() no está disponible en nuestra version de datables
      val = escapeRegexCustom(val);

      column
        .search( val ? '^'+val+'$' : '', true, false )
        .draw();

      // para una búsqueda en toda la tabla, tendriamos que hacer
      // table.search(val).draw(); //y no aplicar la expresion regular, o modificarla para adaptarla a cada caso

    });
  // rellenamos las opciones del select
  columnValues.forEach(function(item){
    select.append( '<option value="' + item + '">' + item + '</option>' ) 
  })
  
  
} // /initComplete