Question

以下是将搜索结果显示为表格的代码。

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="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>

输出：

ID         Name 
-----------------
1 v 1      John
121 v 1    Janet
2 v 1      Jack

上述输出在2之前的121中排序，因为＆＃34; v＆＃34;在中间添加。

但预期的输出是：

ID         Name 
-----------------
1 v 1      John
2 v 1      Jack
121 v 1    Janet

请有人帮忙解决这个问题。

感谢。

Answer 1

下面的代码对我有用。我添加了一个隐藏列来显示ID1 + ID2（中间没有v。）并且还在dataTable配置中添加了一个脚本。

'columnDefs': [
    { 'orderData':[2], 'targets': [1] },
    {
        'targets': [2],
        'visible': false,
        'searchable': false
    },
],

因此，当用户对第1列（ID1 v ID2）进行排序时，它实际上会对第2列进行排序（ID1ID2）

感谢大家的帮助。

Answer 2

您可以为此创建自定义排序插件。在我看来，你想要对第一个ID进行排序，所以

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "first-id-pre": function ( a ) {
        return parseInt($(a).text().split(' ')[0]);
    },

    "first-id-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "fist-id-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
} );

用法：

var table = $('#example').DataTable({
   columnDefs : [
     { type: 'first-id', targets: 0 }
  ]
})

演示 - ＆gt;的 http://jsfiddle.net/jt66jf42/

如何在数据表中对字符串和数字的组合进行排序

2 个答案: