Dynamic column filters

412 Views Asked by At

Instead of referencing columns by number, I would like to define filters more dynamically. In particular, I'd like a way to say "all columns with th class xx get filter type yyy". Is that possible?

2

There are 2 best solutions below

0
On BEST ANSWER

Since 0.9.4.beta.10 you can also use the columnDefs and provide yadcf with a column_selector instead of column_number, see it in action

var columnDefs = [{
    "targets": "API",
    "data": "API"
  },
  {
    "targets": "Description",
    "data": "Description"
  },
  {
    "targets": "Category",
    "data": "Category"
  },
];



var exampleTable1 = $("#example1").DataTable({
  "ajax": {
    "url": "https://api.publicapis.org/entries?category=Animals",
    "cache": true, // Or else `&_=23628934` gets added to the query string.
    "dataSrc": "entries"
  },
  "columnDefs": columnDefs
});

var yadcfConfiguration = [{
      // https://datatables.net/reference/type/column-selector
      column_selector: '.API'
    },
    {
      // https://datatables.net/reference/type/column-selector
      column_selector: '.Description',
      filter_type: "text"
    },
    {
      // https://datatables.net/reference/type/column-selector
      column_selector: '.Category',
      filter_type: "text"
    }
  ];

 yadcf.init(exampleTable1, yadcfConfiguration);
0
On

I was able to get this resolved. Posting the code in case it is useful to someone else:

// Set filters
var THs = document.getElementsByTagName("th");
var filterArray = [];
for (i = 0; i < THs.length; i++) {
    var colNumber = i;
    if ((THs[i].classList.contains('searchText')) || (THs[i].classList.contains('searchSelect')) || (THs[i].classList.contains('searchDate'))) {
        if (THs[i].classList.contains('searchText')) {
            var colFilter = "text";
        }
        if (THs[i].classList.contains('searchSelect')) {
            var colFilter = "select";
        }
        if (THs[i].classList.contains('searchDate')) {
            var colFilter = "range_date";
        }
        filterArray.push({column_number: colNumber , filter_type: colFilter});
    }
}

yadcf.init(containerTable, filterArray);