数据表中 select 个元素的动态过滤值
Dynamic filtering values in select elements in Datatables
在 Datatables
中使用以下多重过滤 select
输入代码是否可以在 selection 上仅显示其他 select 输入中的可用值在一个过滤器中?更准确地说,在这个 example 中,如果我 select 'Tokyo' 作为 Office,我只想填充值 'Accountant'、'Integration Specialist'、'Support Engineer' 和 'Regional Marketing' 在 Position.
的下拉菜单中
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
this.api().columns([1,2]).every( function () {
var column = this;
var select = $('<select><option value=""></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 ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
} );
////// here I get the unique values of each filtered `select` option
$('select').on('change', function () {
var dtable = $('#datatable').DataTable();
var filteredArray = [];
var filteredArray2 = [];
dtable.column(1, { search: 'applied' }).data()
.unique()
.sort()
.each(function (value, index) {
filteredArray.push(value);
});
dtable.column(2, { search: 'applied' })
.data()
.unique()
.sort()
.each(function (value, index) {
filteredArray2.push(value);
});
console.log(filteredArray);
console.log(filteredArray2);
});
在我的例子中,我只在上面的代码片段中显示了两列过滤器,因此在 selection 在两个过滤器之一中,我希望在另一个过滤器中仅显示可用值筛选。
虽然我已经设法在 selection 上获得每个过滤器的唯一值,但我正在努力隐藏 filteredArray 中不存在的所有 input
值s
这是执行此操作的一种方法。
最终结果如下:
构建仅包含列的未过滤(可见)值的下拉列表相对简单。这样做的核心是我们使用以下内容:
columns( { search: 'applied' } ).data()[index]
大部分复杂性与管理两个下拉菜单的相互关联状态有关。加载页面后,首先使用的下拉列表被指定为 "primary" 下拉列表,另一个被指定为 "secondary"。每当用户从主要下拉列表中选择一个新值时,我们必须清除次要下拉列表;然后在应用主要下拉过滤器后,我们必须重新构建次要下拉列表的值。
最终结果是这样的:
<script type="text/javascript">
/* Each drop-down selection affects the values in the other drop-downs */
var primaryColIdx;
var secondaryColIdx;
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
populateDropdowns(this);
}
} );
} );
function populateDropdowns(table) {
table.api().columns([1,2]).every( function () {
var column = this;
//console.log("processing col idx " + column.index());
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var dropdown = this;
doFilter(table, dropdown, column);
rebuildSecondaryDropdown(table, column.index());
} );
column.data().unique().sort().each( function ( val, idx ) {
select.append( '<option value="' + val + '">' + val + '</option>' )
} );
} );
}
function doFilter(table, dropdown, column) {
// first time a drop-down is used, it becomes the primary. This
// remains the case until the page is refreshed:
if (primaryColIdx == null) {
primaryColIdx = column.index();
secondaryColIdx = (primaryColIdx == 1) ? 2 : 1;
}
if (column.index() === primaryColIdx) {
// reset all the filters because the primary is changing:
table.api().search( '' ).columns().search( '' );
}
var filterVal = $.fn.dataTable.util.escapeRegex($(dropdown).val());
//console.log("firing dropdown for col idx " + column.index() + " with value " + filterVal);
column
.search( filterVal ? '^' + filterVal + '$' : '', true, false )
.draw();
}
function rebuildSecondaryDropdown(table, primaryColIdx) {
var secondaryCol;
table.api().columns(secondaryColIdx).every( function () {
secondaryCol = this;
} );
// get only the unfiltered (unhidden) values for the "other" column:
var raw = table.api().columns( { search: 'applied' } ).data()[secondaryColIdx];
// the following uses "spread syntax" (...) for sorting and de-duping:
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
var uniques = [...new Set(raw)].sort();
var filteredSelect = $('<select><option value=""></option></select>')
.appendTo( $(secondaryCol.footer()).empty() )
.on( 'change', function () {
var dropdown = this;
doFilter(table, dropdown, secondaryCol);
//rebuildSecondaryDropdown(table, column.index());
} );
uniques.forEach(function (item, index) {
filteredSelect.append( '<option value="' + item + '">' + item + '</option>' )
} );
}
</script>
在 Datatables
中使用以下多重过滤 select
输入代码是否可以在 selection 上仅显示其他 select 输入中的可用值在一个过滤器中?更准确地说,在这个 example 中,如果我 select 'Tokyo' 作为 Office,我只想填充值 'Accountant'、'Integration Specialist'、'Support Engineer' 和 'Regional Marketing' 在 Position.
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
this.api().columns([1,2]).every( function () {
var column = this;
var select = $('<select><option value=""></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 ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
} );
////// here I get the unique values of each filtered `select` option
$('select').on('change', function () {
var dtable = $('#datatable').DataTable();
var filteredArray = [];
var filteredArray2 = [];
dtable.column(1, { search: 'applied' }).data()
.unique()
.sort()
.each(function (value, index) {
filteredArray.push(value);
});
dtable.column(2, { search: 'applied' })
.data()
.unique()
.sort()
.each(function (value, index) {
filteredArray2.push(value);
});
console.log(filteredArray);
console.log(filteredArray2);
});
在我的例子中,我只在上面的代码片段中显示了两列过滤器,因此在 selection 在两个过滤器之一中,我希望在另一个过滤器中仅显示可用值筛选。
虽然我已经设法在 selection 上获得每个过滤器的唯一值,但我正在努力隐藏 filteredArray 中不存在的所有 input
值s
这是执行此操作的一种方法。
最终结果如下:
构建仅包含列的未过滤(可见)值的下拉列表相对简单。这样做的核心是我们使用以下内容:
columns( { search: 'applied' } ).data()[index]
大部分复杂性与管理两个下拉菜单的相互关联状态有关。加载页面后,首先使用的下拉列表被指定为 "primary" 下拉列表,另一个被指定为 "secondary"。每当用户从主要下拉列表中选择一个新值时,我们必须清除次要下拉列表;然后在应用主要下拉过滤器后,我们必须重新构建次要下拉列表的值。
最终结果是这样的:
<script type="text/javascript">
/* Each drop-down selection affects the values in the other drop-downs */
var primaryColIdx;
var secondaryColIdx;
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
populateDropdowns(this);
}
} );
} );
function populateDropdowns(table) {
table.api().columns([1,2]).every( function () {
var column = this;
//console.log("processing col idx " + column.index());
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var dropdown = this;
doFilter(table, dropdown, column);
rebuildSecondaryDropdown(table, column.index());
} );
column.data().unique().sort().each( function ( val, idx ) {
select.append( '<option value="' + val + '">' + val + '</option>' )
} );
} );
}
function doFilter(table, dropdown, column) {
// first time a drop-down is used, it becomes the primary. This
// remains the case until the page is refreshed:
if (primaryColIdx == null) {
primaryColIdx = column.index();
secondaryColIdx = (primaryColIdx == 1) ? 2 : 1;
}
if (column.index() === primaryColIdx) {
// reset all the filters because the primary is changing:
table.api().search( '' ).columns().search( '' );
}
var filterVal = $.fn.dataTable.util.escapeRegex($(dropdown).val());
//console.log("firing dropdown for col idx " + column.index() + " with value " + filterVal);
column
.search( filterVal ? '^' + filterVal + '$' : '', true, false )
.draw();
}
function rebuildSecondaryDropdown(table, primaryColIdx) {
var secondaryCol;
table.api().columns(secondaryColIdx).every( function () {
secondaryCol = this;
} );
// get only the unfiltered (unhidden) values for the "other" column:
var raw = table.api().columns( { search: 'applied' } ).data()[secondaryColIdx];
// the following uses "spread syntax" (...) for sorting and de-duping:
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
var uniques = [...new Set(raw)].sort();
var filteredSelect = $('<select><option value=""></option></select>')
.appendTo( $(secondaryCol.footer()).empty() )
.on( 'change', function () {
var dropdown = this;
doFilter(table, dropdown, secondaryCol);
//rebuildSecondaryDropdown(table, column.index());
} );
uniques.forEach(function (item, index) {
filteredSelect.append( '<option value="' + item + '">' + item + '</option>' )
} );
}
</script>