Question

我正在使用dataTables搜索HTML表中的数据。

当我尝试按数字过滤时出现问题。数字已格式化，因此不会被过滤。

一个例子：

在表中，我有一个包含“ 123,456”（而不是“ 123456”）的单元格。

如果我在搜索框中输入“ 1234”，它将过滤出该数字。如果我输入“ 3,456”，它将找到我想要的。

我尝试格式化键入的数字，但是效果不够好（它将'1234'格式化为'1,234'，因此找不到逗号为123,456的地方。另一个示例-如果我要查找“ 50”，它将过滤掉5,000）：

$( "#activity_table_filter input" ).keydown( function(){
        var current_value = $( "#activity_table_filter input" ).val();
        current_value = current_value.replace(/,/g, ''); //remove any commas from current value.
        var key = event.keyCode;
        var entered_value = String.fromCharCode( (96 <= key && key <= 105) ? key - 48 : key ); //charCode doesnt really get numpad numbers

        if( !isNaN( current_value ) && current_value != '' && !isNaN( entered_value ) ){ //if current and entered value are numeric, and current value is not an empty string
            if( current_value % 1 === 0 && current_value.length >= 3 ){ //if the number is an integer and has 3 digits
                current_value = current_value + '0'; //add a last char
                var formatted_value = parseInt(current_value).toLocaleString(); //format to beautiful
                formatted_value = formatted_value.toString(); //Convert to string
                formatted_value = formatted_value.slice(0,-1); //remove added '0' from the end
                $( "#activity_table_filter input" ).val( formatted_value ); //change value of input to formatted input.
            }else{ //if the number is a float

            }
        }
});

Answer 1

有很多解决此问题的方法，但我会提到两个最简单的方法。

对于基于HTML的数据，请使用单元格data-search属性指定未格式化的数字。

例如：
```
<td data-search="123456">123,456</td>
```
有关示例和更多信息，请参见HTML5 data-* attributes - cell data示例。
对于JavaScript和基于Ajax的数据，您可以对columns.render选项使用相同的操作。

jQuery DataTables使用术语orthogonal data，这意味着它可能出于不同目的使用不同的数据。

然后，您的数据需要包括两个附加属性，display用于在表中显示，search用于搜索。
```
{
    "data": [
        {
            "formatted_number": {
                "display": "123,456",
                "filter": "123456"
            },
            "office":     "Edinburgh"
        }
    ]    
}
```
要以这种格式使用数据，请在columns或columnDefs列说明中使用以下选项：
```
{
    data: 'formatted_number',
    render: {
        _: 'display',
        filter: 'filter'
    }
}
```
有关示例和更多信息，请参见Orthogonal data示例。

Answer 2

您是否尝试过使用开发性的search plugin？搜索整数数据要比smart search选项好得多。请参阅下面的documentation中使用整数范围的示例。只需确保表格中的整数数据为rendered即可。还有custom renderers可以帮助您用逗号格式化那些整数。

/* Custom filtering function which will search data in column four between two values */
$.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从格式化的数字中搜索数字

2 个答案: