Question

我正在寻找一个搜索过滤器，例如在我的表中显示Age列中12到40岁之间的年龄。

我能够通过使用datatable插件范围搜索来解决这个问题，但它会弄乱滚动和我的粘贴标题和列宽等等，

所以我决定不花时间修复数据表样式问题并制作范围搜索过滤器我到处寻找参考和示例，除了datatables插件范围搜索外什么都没找到。

这是代码：

$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
    var min = parseInt( $('#min').val(), 10 );
    var max = parseInt( $('#max').val(), 10 );
    var age = parseFloat( data[3] ) || 0; // use data for the age column

    if ( ( isNaN( min ) && isNaN( max ) ) ||
         ( isNaN( min ) && age <= max ) ||
         ( min <= age   && isNaN( max ) ) ||
         ( min <= age   && age <= max ) )
    {
        return true;
    }
    return false;
}
);

$(document).ready(function() {
var table = $('#example').DataTable();

// Event listener to the two range filtering inputs to redraw on input
$('#min, #max').keyup( function() {
    table.draw();
} );
} );

无论如何要使这不依赖于datatables插件？

任何帮助将不胜感激。

Answer 1

在自定义过滤器中返回true或false告诉DataTables它是否应该排除或包含该行。你可以使用jQuerys＆＃39; show()和hide()复制相同的行为：

$('#min, #max').keyup(function() {
   var min = parseInt( $('#min').val(), 10 );
   var max = parseInt( $('#max').val(), 10 );
   $('#example tbody tr').each(function() {
     var age = parseFloat( $('td:eq(3)', this).text() ) || 0; 
     if (( isNaN( min ) && isNaN( max )) ||
         ( isNaN( min ) && age <= max ) ||
         ( min <= age   && isNaN( max )) ||
         ( min <= age   && age <= max )) {
        $(this).show()
     } else {
        $(this).hide()
     }   
   })
});

<强> http://jsfiddle.net/c48z34xx/

范围搜索过滤器表的特定列

1 个答案: