动态列过滤器
Dynamic column filters
我不想按编号引用列,而是想更动态地定义过滤器。特别是,我想要一种表达 "all columns with th class xx get filter type yyy" 的方式。这可能吗?
我能够解决这个问题。发布代码以防对其他人有用:
// 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);
因为 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);
我不想按编号引用列,而是想更动态地定义过滤器。特别是,我想要一种表达 "all columns with th class xx get filter type yyy" 的方式。这可能吗?
我能够解决这个问题。发布代码以防对其他人有用:
// 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);
因为 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);