dataTables 从格式化数字中搜索数字答案

【问题标题】：dataTables search number from formatted numberdataTables 从格式化数字中搜索数字
【发布时间】：2018-08-28 20:42:12
【问题描述】：

我正在使用 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

            }
        }
});

【问题讨论】：

请分享您到目前为止尝试过的代码
已添加，但我真的看不出它有什么帮助。如果您要查找 50，它不会找到写在某处的 5,000。

标签： javascript jquery html filter datatables

【解决方案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 示例。

【讨论】：

您需要做的就是发布 HTML5 数据-* 属性-单元格数据链接。这很完美。谢谢你。它实际上甚至解决了我没有在这里写的另一个问题。

【解决方案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();
    } );
} );

【讨论】：