Html 如何对数据表中字符串和数字的组合进行排序
下面是将搜索结果显示为表格的代码 HTML:Html 如何对数据表中字符串和数字的组合进行排序,html,datatables,thymeleaf,Html,Datatables,Thymeleaf,下面是将搜索结果显示为表格的代码 HTML: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"> <head> <link th:href="@{/css/bootstrap.min.css}" rel="styleshe
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
<link th:href="@{/css/jquery.ui.datepicker.css}" rel=" stylesheet" />
<link th:href="@{/css/jquery-ui.css}" rel=" stylesheet" />
<link th:href="@{/css/jquery.dataTables.css}" rel=" stylesheet" />
<link th:href="@{/css/rowReorder.dataTables.css}" rel=" stylesheet" />
<script th:src="@{/js/jquery-2.1.3.min.js}"></script>
<script th:src="@{/js/jquery.dataTables.js}"></script>
<script th:src="@{/js/dataTables.rowReorder.js}"></script>
<script th:src="@{/js/jquery-ui.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
</head>
<body>
<script type="text/javascript" th:inline="javascript">
$(document).ready(function() {
var table = $("#results").dataTable(
{
"scrollX" : true,
"ordering" : true,
"order" :
[
[
0, "asc"
]
],
"columnDefs" :
[
{
"orderable" : false,
"targets" : 0
}
],
"info" : true,
});
});
</script>
<table id="results">
<thead>
<tr>
<th>ID </th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr th:each="map : ${searchList}">
<td>
<a th:id="${map['ID1']} + 'v' + ${map['ID2']}" style="cursor: pointer;" th:text="${map['ID1']} + ' v ' + ${map['ID2']}"></a>
</td>
<td th:text="${map['NAME']}"></td>
</tr>
</tbody>
</table>
</body>
</html>
上述输出在2之前排序为121，因为中间添加了“V”。p> 但预期产出是：
ID Name
-----------------
1 v 1 John
2 v 1 Jack
121 v 1 Janet
谢谢。您可以为此创建自定义排序插件。在我看来，你想根据第一个ID排序，所以
jQuery.extend（jQuery.fn.dataTableExt.oSort{
“第一个id前置”：功能（a）{
返回parseInt（$（a）.text（）.split（“”）[0]）；
},
“第一id asc”：功能（a、b）{
回报率（（ab）？1:0）；
},
“fist id desc”：功能（a、b）{
回报率（（ab）？-1:0）；
}
} );
var table=$（'#示例'）.DataTable({
columnDefs：[
{type:'first id'，目标：0}
]
})
演示->您可以为此创建自定义排序插件。在我看来，你想根据第一个ID排序，所以
jQuery.extend（jQuery.fn.dataTableExt.oSort{
“第一个id前置”：功能（a）{
返回parseInt（$（a）.text（）.split（“”）[0]）；
},
“第一id asc”：功能（a、b）{
回报率（（ab）？1:0）；
},
“fist id desc”：功能（a、b）{
回报率（（ab）？-1:0）；
}
} );
var table=$（'#示例'）.DataTable({
columnDefs：[
{type:'first id'，目标：0}
]
})
演示->下面的代码对我很有用。我添加了一个隐藏列来显示ID1+ID2（中间没有V），并在DATAIT配置中添加了一个脚本。
'columnDefs': [
{ 'orderData':[2], 'targets': [1] },
{
'targets': [2],
'visible': false,
'searchable': false
},
],
谢谢大家的帮助。下面的代码对我很有用。我添加了一个隐藏列来显示ID1+ID2（中间没有V），并在DATAIT配置中添加了一个脚本。
'columnDefs': [
{ 'orderData':[2], 'targets': [1] },
{
'targets': [2],
'visible': false,
'searchable': false
},
],
谢谢大家的帮助。Thakyou非常感谢。我试过你的建议。但它不起作用。我已向其他现有属性添加了
“columnDefs”：[{type:'first id'，targets:0}]targetstargets[0,4,7]目标。此外，自定义排序插件应该在初始化dataTable之前声明，就像在fiddle中一样。感谢您的帮助。谢谢你的补充信息。但是我在没有自定义排序插件的情况下得到了解决方案。@Java_用户，好的，很好-但是我认为仅仅为了排序而使用隐藏列有点过分：）你连接了数字吗？如果ID2
始终是1，那么就不会有问题，但是如果ID2
是10
，会怎么样？那么2v1
将被视为低于1v10
，21
vs110
。。？无论如何+1，记住将你自己的问题标记为已接受。@davidkonard。ID2的最大值为9。它总是个位数。所以这不应该是个问题。我将把这个问题标记为已被接受。谢谢你的帮助，太谢谢你了。我试过你的建议。但它不起作用。我已向其他现有属性添加了“columnDefs”：[{type:'first id'，targets:0}]
。我也更新了我的问题。你能告诉我是怎么回事吗。再次感谢。@Java\u用户，它没有“复制粘贴”功能，因为您正在将内容包装到
标记中。但看到最新消息，我们已经注意到了这一点——也在提琴中。需要明确的是，targets
是列索引，如果该列不是第一列，那么当然应该将targets
设置为该列索引。您可以使用[0,4,7]
设置多个目标。此外，自定义排序插件应该在初始化dataTable之前声明，就像在fiddle中一样。感谢您的帮助。谢谢你的补充信息。但是我在没有自定义排序插件的情况下得到了解决方案。@Java_用户，好的，很好-但是我认为仅仅为了排序而使用隐藏列有点过分：）你连接了数字吗？如果ID2
始终是1，那么就不会有问题，但是如果ID2
是10
，会怎么样？那么2v1
将被视为低于1v10
，21
vs110
。。？无论如何+1，记住将你自己的问题标记为已接受。@davidkonard。ID2的最大值为9。它总是个位数。所以这不应该是个问题。我将把这个问题标记为已被接受。谢谢你的帮助。