DataTables brackets-带动态列的负插件
DataTables brackets-negative plug-in with dynamic columns
我有一个数据表,我在初始化之前 generate dynamic headers 对其进行了设置。这意味着我无法预测列数据类型,因此我依靠 DataTables 根据数据识别列类型来进行排序。
返回的某些列包含货币数据(示例格式:$234,392.01)。有时,数据用括号括起来表示负值:($234,392.01)。由于括号的原因,DataTables 将此列识别为字符串并对其进行了错误排序。
我试过使用 brackets-negative plug-in,但它并没有真正起到任何作用。但是,除了将插件粘贴到我的代码中之外,我没有做任何额外的事情。
使用brackets-negative插件还需要做些什么吗?如果这是由动态列引起的限制,是否有其他方法可以解决此问题?
需要说明的是,如果列中没有括号,DataTables 会正确排序货币数据。
插件不起作用的测试用例(不知道为什么代码格式如此糟糕):
$(document).ready(function() {
var columns = [
{ "data": "Column5", "title": "Column5" },
];
var data = [
{"Column5":"(1.17)"},{"Column5":",170.30"},{"Column5":"8,588.32"},
{"Column5":",874.09"},{"Column5":".99"},{"Column5":",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>
我注意到如果删除空记录它会起作用,但我需要它来处理空记录。此外,如果保留空值并删除括号,它也有效。
好像brackets-negative插件不支持null
个值。
下面的代码是brackets-negative插件的修改版本,如果数据是null
,return 'currency',处理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 );
};
}());
我有一个数据表,我在初始化之前 generate dynamic headers 对其进行了设置。这意味着我无法预测列数据类型,因此我依靠 DataTables 根据数据识别列类型来进行排序。
返回的某些列包含货币数据(示例格式:$234,392.01)。有时,数据用括号括起来表示负值:($234,392.01)。由于括号的原因,DataTables 将此列识别为字符串并对其进行了错误排序。
我试过使用 brackets-negative plug-in,但它并没有真正起到任何作用。但是,除了将插件粘贴到我的代码中之外,我没有做任何额外的事情。
使用brackets-negative插件还需要做些什么吗?如果这是由动态列引起的限制,是否有其他方法可以解决此问题?
需要说明的是,如果列中没有括号,DataTables 会正确排序货币数据。
插件不起作用的测试用例(不知道为什么代码格式如此糟糕):
$(document).ready(function() {
var columns = [
{ "data": "Column5", "title": "Column5" },
];
var data = [
{"Column5":"(1.17)"},{"Column5":",170.30"},{"Column5":"8,588.32"},
{"Column5":",874.09"},{"Column5":".99"},{"Column5":",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>
我注意到如果删除空记录它会起作用,但我需要它来处理空记录。此外,如果保留空值并删除括号,它也有效。
好像brackets-negative插件不支持null
个值。
下面的代码是brackets-negative插件的修改版本,如果数据是null
,return 'currency',处理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 );
};
}());