我有一个列，其中有以各种单位定义的长度值，例如：- 10mm、200cm、500mm 等，其中 mm = 毫米，cm = 厘米。我正在使用服务器端脚本从 MySql 数据库获取此信息。让它们正确地从升序到降序排序或从升序到降序排序的最佳方法是将所有值转换为 mm，然后排序。我尝试了各种方法来实现这一目标，包括对正交数据进行读取，但是，我无法理解它。每次排序都是随意的，值混合等等。
我的 PHP 脚本很简单：-
$columns = array(
array( 'db' => 'length', 'dt' => 'length' )
);
至于我在 JS 级别尝试过的所有内容，这里是：-
方法一、type为sort时设置sort-value
结果：随意排序，没有节奏
new DataTable('#lt-table', {
ajax: {
url: 'lt-sorter.php',
type: 'POST'
},
columns: [
{ data: 'null',
render: function ( data, type, row ) {
if ( type === 'sort' ) {
if (row.length.includes('mm')) {
var sortValue = row.length.replace('mm', '');
} else if (row.length.includes('cm')) {
var sortValue = row.length.replace('cm', '') * 10;
}
return sortValue;
} else {
return row.length;
}
}
},
processing: true,
serverSide: true
});
方法2.createdRow添加数据排序
结果：数据排序设置成功。但是，仍然是随意排序，没有节奏。还尝试了数据顺序，结果相同
createdRow: function (row, data, dataIndex) {
if (data.length.includes('mm')) {
$(row).find('td:eq(0)').attr('data-sort', data.length.replace('mm', ''));
} else if (data.length.includes('cm')) {
$(row).find('td:eq(0)').attr('data-sort', data.length.replace('cm', '') * 10);
}
}
方法3.隐藏值
结果：隐藏值完全被忽略。几乎没有发生排序
return '<span style="display:none">' + row.length.replace('mm', '') + ' </span>' + row.length;
我显然在某个地方搞砸了，但是，有人可以指出我做错了什么吗？
我做了一些研究，我能够得到这个基本的解决方案，与你在方法 1 中描述的类似。
我创建了一个函数将单位转换为 mm 'convertToMM()'，然后使用该函数向数据表注册了一个自定义类型。我在整个代码中添加了注释，我希望这有助于解释发生了什么
下面的代码片段显示了一个基本的静态表，其中有 2 列“长度”和“宽度”，它们都采用不同的公制单位 mm、cm 和 m。尝试自己运行该代码片段并查看排序的实际情况。
如果您有任何疑问或有任何不清楚的地方，请告诉我。
const customType = "metric-unit"; // name of custom data type to use with data tables, this can be anything i just called it metric-unit
// Register the custom data type, this tells data tables how it should sort the values.
$.fn.dataTable.ext.type.order[customType] = function (d) {
return convertToMM(d); // convert data to millimeters for sorting
};
$(document).ready(function() {
$('#lt-table').DataTable({
"columnDefs": [
// For each column in the table that has the units you want to sort assign the type to them
{
"type": customType, // the data type to use
"targets": 0, // 0 in this instance is Length, Adjust the column index according to your table structure
"render":unitRender // name of function that handles render logic
},
{
"type": customType, // the data type to use
"targets": 1, // 1 in this instance is Width, Adjust the column index according to your table structure
"render": unitRender // name of function that handles render logic
}
]
});
});
function unitRender(data, type, row){
if (type === 'sort') {
return convertToMM(data); // use converted values for sorting
}
return data; // display the original value
}
function convertToMM(value) {
var strValue = value.toString(); // ensure it's a string
var unit = strValue.match(/[a-zA-Z]+/)[0]; // extract unit
var number = parseFloat(strValue.match(/[0-9.]+/)[0]); // extract number
switch(unit) {
case 'cm':
return number * 10; // convert cm to mm
case 'm':
return number * 1000; // convert m to mm
case 'mm':
return number;
default:
return number; // in case an unhandled unit sneaks in
}
}<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="//cdn.datatables.net/2.1.8/css/dataTables.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="//cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>
</head>
<body>
<table id="lt-table">
<thead>
<tr>
<th>Length</th>
<th>Width</th>
</tr>
</thead>
<tbody>
<tr>
<td>500cm</td>
<td>400cm</td>
</tr>
<tr>
<td>600mm</td>
<td>200mm</td>
</tr>
<tr>
<td>1m</td>
<td>3m</td>
</tr>
<tr>
<td>5mm</td>
<td>3mm</td>
</tr>
</tbody>
</table>
</body>