Плагин DataTables со скобками-негативами со столбцами Dynami c - PullRequest
Новая
       43

Плагин DataTables со скобками-негативами со столбцами Dynami c

0 голосов
/ 29 апреля 2020

У меня есть DataTable, для которого я генерирую динамические c заголовки перед его инициализацией. Это означает, что я не могу предсказать типы данных столбца, поэтому я полагаюсь на DataTables, определяющие тип столбца на основе данных, чтобы заставить сортировку работать.

Некоторые возвращаемые столбцы имеют данные о валюте (Примерный формат: $ 234 392,01). Иногда данные заключаются в круглые скобки для представления отрицательного значения: (234 392,01 долл. США). Из-за круглых скобок DataTables идентифицирует этот столбец как строку и неправильно сортирует его.

Я пытался использовать плагин для отрицательных скобок , но на самом деле он ничего не делал. Тем не менее, я не делаю ничего дополнительного, кроме вставки плагина в мой код.

Нужно ли мне что-то дополнительно использовать, чтобы использовать скобки-отрицательный плагин? Если это ограничение вызвано динамическими c столбцами, есть ли другой способ решить эту проблему?

И просто для ясности, если в столбце нет скобок, DataTables правильно сортирует данные валюты .

Тестовый случай, когда плагин не работает (не уверен, почему форматирование кода так ужасно): 

$(document).ready(function() {

  var columns = [
			{ "data": "Column5", "title": "Column5" },
		];
  var data = [
    {"Column5":"($371.17)"},{"Column5":"$94,170.30"},{"Column5":"$868,588.32"},
    {"Column5":"$81,874.09"},{"Column5":"$89.99"},{"Column5":"$2,800,594.59"},
    {"Column5":null},{"Column5":null},{"Column5":null},{"Column5":null},
    {"Column5":null},{"Column5":null},{"Column5":null},{"Column5":null},
    {"Column5":null}
  ];
  
  $('#example').dataTable( {
		"columns": columns,
        "data": data
	} );
} );
body {
	font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
	<head>
		<link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
  

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.20/sorting/brackets-negative.js"></script>
		<meta charset=utf-8 />
		<title>DataTables - JS Bin</title>
	</head>
	<body>
		<div class="container">
			<table id="example" class="display" width="100%">
			</table>
		</div>
	</body>
</html>

Я заметил, что если удаляются нулевые записи, это работает, но мне нужно, чтобы оно работало с пустыми значениями. Кроме того, если нулевые значения сохраняются и скобки удаляются, это также работает.

1 Ответ

0 голосов
/ 30 апреля 2020

Похоже, что плагин, заключенный в скобки, не поддерживает значения null.

Приведенный ниже код представляет собой модифицированную версию плагина, заключающего в скобки и возвращающую «валюту», если данные null и обрабатывать значения null и '' (пустая строка) как 0 при заказе.

Мне удалось заменить 0 на Number.NEGATIVE_INFINITY, чтобы null и '' всегда рассматриваются как самые низкие значения. 

(function(){
    // Change this list to the valid characters you want to be detected
    var validChars = "$£€c" + "0123456789" + ".-,()'";
    // Init the regex just once for speed - it is "closure locked"
    var
    str = jQuery.fn.dataTableExt.oApi._fnEscapeRegex( validChars ),re = new RegExp('[^'+str+']');
    $.fn.dataTableExt.aTypes.unshift(
        function ( data )
        {         
            // Added this check for null
            if ( data === null) {
              return 'currency';
            }

            if ( typeof data !== 'string' || re.test(data) ) {
                return null;
            }
            return 'currency';
        }
    );
    $.fn.dataTable.ext.type.order['currency-pre'] = function ( data ) {      
      // Added '|| data === null'
      // Treat '' and null as 0
      if ( data === '' || data === null) {
            return 0;
        }

        //Check if its in the proper format
        if(data.match(/[\()]/g)){
            if( data.match(/[\-]/g) !== true){
                //It matched - strip out parentheses & any characters we dont want and append - at front
                data = '-' + data.replace(/[\$£€c\(\),]/g,'');
            }else{
                //Already has a '-' so just strip out non-numeric charactors exluding '-'
                data = data.replace(/[^\d\-\.]/g,'');
            }
        }else{
            data = data.replace(/[\$£€\,]/g,'');
        }
        return parseFloat( data );
    };
}());
...