dataTables поиск номера отформатированного номера

Question

Я использую dataTables для поиска данных в моей таблице HTML.

Проблема возникает, когда я пытаюсь фильтровать по номеру. Числа отформатированы, поэтому они не фильтруются должным образом.

Пример:

В таблице у меня есть ячейка, которая содержит «123 456» (вместо «123456»).

Если я введу в поле поиска «1234», оно отфильтрует число. Если я наберу «3456», он найдет то, что я ищу.

Я попытался отформатировать набранные цифры, но это не сработало достаточно (он отформатирует «1234» в «1234», поэтому не найдет «123 456», потому что запятая не на месте. Другой пример - если я буду искать «50», это отфильтрует 5000):

$( "#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

Вы пробовали использовать поисковый плагин ? Поиск целочисленных данных намного лучше, чем опция smart search. См. Пример с использованием целых чисел из документации ниже. Просто убедитесь, что ваши целочисленные данные отображаются как таковые в таблице. Есть также пользовательских средств визуализации , которые помогут вам отформатировать эти целые числа запятыми.

/* 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();
    } );
} );

Answer 2

Существует много способов решения этой проблемы, но я упомяну два самых простых.

1. Для данных из источника HTML используйте атрибут ячейки data-search, чтобы указать неформатированное число.

   Например:

   <td data-search="123456">123,456</td>
   

   См. HTML5 data-* атрибуты - данные ячейки пример для демонстрации и получения дополнительной информации.

2. Для данных из JavaScript и Ajax-источников вы можете сделать то же самое с опцией columns.render.

   jQuery DataTables использует термин ортогональные данные , означающий, что он может использовать разные данные для разных целей.

   Ваши данные должны включать два дополнительных свойства: display для отображения в таблице и search для поиска.

   {
       "data": [
           {
               "formatted_number": {
                   "display": "123,456",
                   "filter": "123456"
               },
               "office":     "Edinburgh"
           }
       ]    
   }
   

   Чтобы использовать данные в этом формате, используйте следующие параметры для описания столбца columns или columnDefs:

   {
       data: 'formatted_number',
       render: {
           _: 'display',
           filter: 'filter'
       }
   }
   

   См. Ортогональные данные Пример для демонстрации и получения дополнительной информации.