DataTables 括号-带动态列的负数插件
Posted
技术标签:
【中文标题】DataTables 括号-带动态列的负数插件【英文标题】：DataTables brackets-negative plug-in with dynamic columns 【发布时间】：2020-04-29 16:06:33 【问题描述】：我有一个数据表，我在初始化之前generate dynamic headers。这意味着我无法预测列数据类型，因此我依赖 DataTables 根据数据识别列类型以使排序正常工作。
返回的某些列包含货币数据（示例格式：$234,392.01）。有时，数据用括号括起来表示负值：($234,392.01)。由于括号，DataTables 将此列标识为字符串并对其进行错误排序。
我尝试过使用brackets-negative plug-in，但它并没有真正做任何事情。但是，除了将插件粘贴到我的代码中之外，我没有做任何额外的事情。
我需要做些什么才能使用括号否定插件吗？如果这是动态列造成的限制，是否有其他方法可以解决此问题？
为了清楚起见，如果列中没有括号，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" >
</table>
</div>
</body>
</html>我注意到如果删除了空记录，它可以工作，但我需要它来处理空值。此外，如果保留空值并删除括号，它也可以工作。
【问题讨论】：
【参考方案1】：括号-负数插件好像不支持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 );
;
());
【讨论】：
以上是关于DataTables 括号-带动态列的负数插件的主要内容，如果未能解决你的问题，请参考以下文章
如何在 DataTables 的 FixedColumns 插件中以交互方式调整固定列的大小
jQuery DataTables插件 aoColumnDefs跟aoColumns的用法