数据表-如何忽略HTML标签排序?

我需要帮助排序第一列。我有一个列与alpha数值的混合。我忽略了alpha值，只按数值排序。但是，如果列有换行符或

标记，则会使排序混乱。请查看此处的代码。

http://live.datatables.net/gezazaza/1/edit

例如，在我的表中，AA-EC-2019-82aa - ec - 2019 - 81AA-EC-2019-71应该在"aa - ec -2019-58"之后。如果按升序排序。我怎样才能做到这一点呢?谢谢。

$(document).ready(function() {
$('#example_full').DataTable({ 
lengthMenu: 
[[10, 20, 30, 40, 50, -1], [10, 20, 30, 40, 50, "All"]],
responsive: true,
paging: true,
searching: true,
lengthChange: true,
bInfo: true,
bSort: true,

columnDefs: [
{
targets: 0,
render: function (data, type, row) {
if (type === 'sort' || type === 'type') {
var text = $(data).text();
var parsedData = text.split('-');
var n = '000' + parsedData[3];
var lastNum = parsedData[2] + '0' + n.slice(-3);
console.log(lastNum);
return lastNum;
}
return data;
}
}
]

});
});

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<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>
<meta charset=utf-8 />
</head>
<body>

<table id="example_full" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"><thead>
<tr>
<th>1</th>
<th data-orderable="false">2</th>
<th data-orderable="false" >3</th>
<th data-orderable="false" >4</th>
</tr>
</thead><tbody>
<tr>
<td nowrap="nowrap"><p>AA-EC-2020-38</p></td>
<td>test2</td>
<td>test2</td>
<td>test2</td>
</tr>
<tr>
<td nowrap="nowrap"><p>AA-EC-2019-58</p></td>
<td>test3</td>
<td>test3</td>
<td>test3</td>
</tr>
<tr>
<td nowrap="nowrap"><p>AA-EC-2019-43</p></td>
<td>test4</td>
<td>test4</td>
<td>test4</td>
</tr>
<tr>
<td nowrap="nowrap"><p>AA-EC-2019-82</br>
AA-EC-2019-81<br>
AA-EC-2019-71</p></td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>




</tbody></table>

您可以通过将order: [[ 0, 'asc' ]]添加到您的可约会参数中来实现:

$(document).ready(function() {
$('#example_full').DataTable({ 
lengthMenu:[[10, 20, 30, 40, 50, -1], [10, 20, 30, 40, 50,"All"]],
responsive: true,
paging: true,
searching: true,
lengthChange: true,
bInfo: true,
order: [[ 0, 'asc' ]]
});
});

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<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>
<meta charset=utf-8 />
</head>
<body>

<table id="example_full" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"><thead>
<tr>
<th>1</th>
<th data-orderable="false">2</th>
<th data-orderable="false" >3</th>
<th data-orderable="false" >4</th>
</tr>
</thead><tbody>
<tr>
<td nowrap="nowrap"><p>AA-EC-2020-38</p></td>
<td>test2</td>
<td>test2</td>
<td>test2</td>
</tr>
<tr>
<td nowrap="nowrap"><p>AA-EC-2019-58</p></td>
<td>test3</td>
<td>test3</td>
<td>test3</td>
</tr>
<tr>
<td nowrap="nowrap"><p>AA-EC-2019-43</p></td>
<td>test4</td>
<td>test4</td>
<td>test4</td>
</tr>
<tr>
<td nowrap="nowrap"><p>AA-EC-2019-82</br>
AA-EC-2019-81<br>
AA-EC-2019-71</p></td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>



</tbody></table>

如果您使用的是PHP应用程序，那么您可以使用data-order属性对列进行自定义值排序，如下所示:

<tr>
<td data-order="<?php echo filter_var('AA-EC-2020-38', FILTER_SANITIZE_NUMBER_INT);?>"><p>AA-EC-2020-38</p></td>
<td>test2</td>
<td>test2</td>
<td>test2</td>
</tr>
<tr>
<td data-order="<?php echo filter_var('AA-EC-2019-58', FILTER_SANITIZE_NUMBER_INT);?>"><p>AA-EC-2019-58</p></td>
<td>test3</td>
<td>test3</td>
<td>test3</td>
</tr>

使用上述data-order属性后，不再需要添加JS代码进行排序。

相关内容

最新更新

热门标签：