英文:
Datatables does not retain the selected filter column values if the value has special characters
问题
我正在使用级联数据表。它运行正常。然而，似乎如果我选择“Name”或“Office”下的值，所选值不会保留在下拉菜单中。但如果我选择“Position”，则会保留所选值，例如：Director或System Architect。
这是因为列1和列3中的列值包含特殊字符，这可能解释了为什么会出现这种情况。(. - 
等。是否有解决方法？用户无法知道从下拉菜单中选择了哪个值。谢谢。
链接：https://live.datatables.net/suwopemu/1/edit
<!-- 开始代码段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
$(document).ready(function() {
var table = $('#example').DataTable({
responsive: true,
searching: true
});
buildSelect( table );
table.on( 'draw', function () {
buildSelect( table );
} );
});
function buildSelect( table ) {
var counter = 0;
table.columns( [0, 1, 2] ).every( function () {
var column = table.column( this, {search: 'applied'} );
counter++;
var select = $('<select><option value=""></option></select>')
.appendTo( $('#dropdown' + counter ).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>');
});
// 重建将清除现有选择，因此需要重新填充
var currSearch = column.search();
if ( currSearch ) {
select.val( currSearch.substring(1, currSearch.length-1) );
}
});
}
<!-- 语言: lang-html -->
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<div class="searchbox">
<p>Name: <span id="dropdown1">
</span>
</p>
<p>Position: <span id="dropdown2">
</span>
</p>
<p>Office: <span id="dropdown3">
</span>
</p>
<button type="button" id="test">Clear Filters</button>
</div>
<table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th colspan="3" style=" text-align: center;">Information</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID.AI</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett -2</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton.1 -2</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
</tr></tbody></table>
</div>
<!-- 结束代码段 -->
英文:
I am using cascading datatables. It works fine. It appears, however, that if I select a value under Name or Office, the selected value is not retained in the dropdown menu. However, if I select Postion, it retains the selected value, for example: Director or System Architect.
It is because Columns 1 and 3 have special characters in the column values, which probably explains why it does this. (. - etc. Is there a way around this? Users are unable to tell which value was selected from the dropdown menu.Thanks.
https://live.datatables.net/suwopemu/1/edit
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(document).ready(function() {
var table = $('#example').DataTable({
responsive: true,
searching: true
});
buildSelect( table );
table.on( 'draw', function () {
buildSelect( table );
} );
});
function buildSelect( table ) {
var counter = 0;
table.columns( [0, 1, 2] ).every( function () {
var column = table.column( this, {search: 'applied'} );
counter++;
var select = $('<select><option value=""></option></select>')
.appendTo( $( '#dropdown' + counter ).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>' );
} );
// The rebuild will clear the exisiting select, so it needs to be repopulated
var currSearch = column.search();
if ( currSearch ) {
select.val( currSearch.substring(1, currSearch.length-1) );
}
} );
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<div class="searchbox">
<p>Name: <span id="dropdown1">
</span>
</p>
<p>Postion: <span id="dropdown2">
</span>
</p>
<p>Office: <span id="dropdown3">
</span>
</p>
<button type="button" id="test">Clear Filters</button>
</div>
<table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>
<th>&#160;</th>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" text-align: center;">Information</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID.AI</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett -2</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton.1 -2</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
</tr></tbody></table>
</div>
<!-- end snippet -->
答案1
得分: 1
问题是column.search()返回一个用于匹配的正则表达式模式。因此，我简单地修改了以下部分：
// 重建将清除现有选择，因此需要重新填充
var currSearch = column.search();
if ( currSearch ) {
select.val( currSearch.substring(1, currSearch.length-1) );
}
来使用正则表达式查找唯一列表中的值：
// 重建将清除现有选择，因此需要重新填充
var currSearch = column.search();
if ( currSearch ) {
select.val( column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch)) ) );
}
以下是此操作的示例：
<!-- 开始代码段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
$(document).ready(function() {
var table = $('#example').DataTable({
responsive: true,
searching: true
});
buildSelect(table);
table.on('draw', function() {
buildSelect(table);
});
});
function buildSelect(table) {
var counter = 0;
table.columns([0, 1, 2]).every(function() {
var column = table.column(this, {
search: 'applied'
});
counter++;
var select = $('<select><option value=""></option></select>')
.appendTo($('#dropdown' + counter).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>');
});
// 重建将清除现有选择，因此需要重新填充
var currSearch = column.search();
if (currSearch) {
// ** 我的更改 **
// 使用正则表达式从列的唯一值中找到所选值。
// 这将使用从column.search返回的正则表达式在column.data().unique中找到第一个匹配项
select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch)));
}
});
}
<!-- 语言: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<div class="searchbox">
<p>Name: <span id="dropdown1">
</span>
</p>
<p>Position: <span id="dropdown2">
</span>
</p>
<p>Office: <span id="dropdown3">
</span>
</p>
<button type="button" id="test">Clear Filters</button>
</div>
<table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;">
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th colspan="3" style=" text-align: center;">Information</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID.AI</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett -2</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton.1 -2</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
</tbody>
</table>
<!-- 结束代码段 -->
希望这对你有帮助！
英文:
The problem is column.search() is returning a regex pattern to match. So I simply modified the
// The rebuild will clear the exisiting select, so it needs to be repopulated
var currSearch = column.search();
if ( currSearch ) {
select.val( currSearch.substring(1, currSearch.length-1) );
}
section to use regEx and find the value in the unique list
// The rebuild will clear the exisiting select, so it needs to be repopulated
var currSearch = column.search();
if ( currSearch ) {
select.val( column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))) );
}
Here is a working example of this in action
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(document).ready(function() {
var table = $('#example').DataTable({
responsive: true,
searching: true
});
buildSelect(table);
table.on('draw', function() {
buildSelect(table);
});
});
function buildSelect(table) {
var counter = 0;
table.columns([0, 1, 2]).every(function() {
var column = table.column(this, {
search: 'applied'
});
counter++;
var select = $('<select><option value=""></option></select>')
.appendTo($('#dropdown' + counter).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>');
});
// The rebuild will clear the exisiting select, so it needs to be repopulated
var currSearch = column.search();
if (currSearch) {
// ** MY CHANGE **
// Use RegEx to find the selected value from the unique values of the column.
// This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
}
});
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<div class="searchbox">
<p>Name: <span id="dropdown1">
</span>
</p>
<p>Postion: <span id="dropdown2">
</span>
</p>
<p>Office: <span id="dropdown3">
</span>
</p>
<button type="button" id="test">Clear Filters</button>
</div>
<table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;">
<thead>
<tr>
<th>&#160;</th>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" text-align: center;">Information</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID.AI</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett -2</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton.1 -2</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
</tbody>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论