数据表 - 如何忽略 HTML 标签进行排序？
[英]Datatables - how to ignore HTML tags for sorting?
问题描述
I need assistance sorting the first column.
我需要帮助对第一列进行排序。 I have a column with a mix of alpha numeric values.我有一列混合了字母数字值。 I am ignoring the alpha values and only sorting by numeric values.我忽略了 alpha 值，只按数值排序。 However if a column has line breaks or但是，如果列有换行符或
tags, it messes up the sorting.标签，它弄乱了排序。 Please see the code here.请在此处查看代码。
http://live.datatables.net/gezazaza/1/edit http://live.datatables.net/gezazaza/1/编辑
In my table, for example, AA-EC-2019-82 AA-EC-2019-81 AA-EC-2019-71 should come after "AA-EC-2019-58" if sorted ascending.例如，在我的表格中，如果按升序排列，AA-EC-2019-82 AA-EC-2019-81 AA-EC-2019-71 应该位于“AA-EC-2019-58”之后。 How can I achieve this?我怎样才能做到这一点？ Thanks.谢谢。
$(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>
2 个解决方案
解决方案1
1 已采纳 2023-01-11 10:02:20
You can do it by adding order: [[ 0, 'asc' ]] to you dateable params:您可以通过将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>
解决方案2
0 2023-01-10 21:46:28
If you are using PHP application, then you can sort column with custom values using data-order attribute like below:如果您使用的是 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>
After using above data-order attribute, you no longer need to add JS code for sorting.使用上面的data-order属性后，就不再需要添加JS代码进行排序了。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.