javascript - 在 DataTables JS 中搜索数字和文本
问题描述
我正在尝试基于此示例改进 DataTables 搜索功能。它使表格页脚可搜索(作为字符串)。我希望能够通过在搜索输入前加上<
或>
符号来将字符串过滤转换为数字过滤。
我不擅长JS。如果这里有一个快速的胜利,那将不胜感激。
<script>
$(document).ready(function() {
$('#{{ v.table_id }} tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
var table = $('#{{ v.table_id }}').DataTable(
{
dom: 'Blfrtip',
buttons: ['copy'],
search: {"caseInsensitive": true},
"lengthMenu": [ [12, 24, 48, -1], [12, 24, 48, "All"] ]
}
);
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
let re_gt = /^>/
let re_lt = /^</
var gt = re_gt.test(this.value)
var lt = re_lt.test(this.value)
/* NEED HELP WITH THIS PART */
if ( re_gt.test(this.value) ) {
var min = parseInt( this.value.slice(1), 10 )
that
.filter( function ( value, index ) { return value < min ? false : true; } )
.draw();
}
else if ( re_lt.test(this.value) ) {
var max = parseInt( this.value.slice(1), 10 )
}
/* THIS PART WORKS */
else {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
}
} );
} );
} );
</script>
解决方案
这看起来很尴尬,但它确实有效。如果我能够同时应用两个有源过滤器,那就太酷了。现在,如果对两列进行大于/小于过滤,切换到第二列会重置第一列的过滤器。
<script>
$(document).ready(function() {
$('#{{ v.table_id }} tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
var table = $('#{{ v.table_id }}').DataTable(
{
dom: 'Blfrtip',
buttons: ['copy'],
order: [[ {{v.sort_col}} ]],
search: {"caseInsensitive": true},
"lengthMenu": [ [12, 24, 48, -1], [12, 24, 48, "All"] ]
}
);
table.columns().every( function () {
var that = this
$( 'input', this.footer() ).on( 'keyup change', function () {
var colnumber = that[0][0] /* got that by inspecting Object.entries(that) in dev mode */
let gtlt = /^[<>]/
if ( gtlt.test(this.value) ) {
var sign = this.value.slice(0,1)
var min = ( sign === '>' ? parseInt( this.value.slice(1), 10 ) || -Infinity : -Infinity )
var max = ( sign === '<' ? parseInt( this.value.slice(1), 10 ) || Infinity : Infinity )
/* console.log(sign, min, max) */
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var values = parseFloat( data[colnumber] ) || 0
/* console.log(min, max, values) */
if (min == null && max == null) {
return true;
}
if (values >= min && values <= max) {
return true;
}
return false;
}
);
table.draw()
/* reset min/max filters to default, inactive values */
min = -Infinity
max = Infinity
}
else {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
}
} );
} );
} );
</script>
推荐阅读
- sql - 如何检查SSMS中的表关系是否是一对多的
- rust - 实施可选特征要求
- javascript - 如何在应用程序或手机内部存储中保存/存储签名图像。在本机反应
- javascript - 使用打字稿限制数组字符串值
- sql - 如果不满足条件,如何在 array_agg 中获取一个空数组?
- php - CodeIgniter:对于每个循环尝试分配非对象的属性“详细信息”
- python - 用另一行中的值填充 nan 值,并在两列或多列中使用公共值
- mobile - 空手道移动测试框架在单击选项时抛出错误
- c# - 如何修复图表 x 轴位置?
- c# - 将 JSON 字符串解析为动态对象而不使用 System.Runtime.Serialization.Json 创建类