如何使用单独的列对jQuery DataTables表进行排序?

克雷登

是否可以使用单独的列对DataTables表进行排序?在下面的示例中,默认情况下使用第一列对表进行排序,该列也被隐藏。即使第三列是日期列,它也不是数字格式。尝试使用第三列对表进行排序时,它是按字母顺序而不是按日期排序。

如何使用第三列按日期对表格进行正确排序?切换第三列时是否可以使用隐藏的第一列对表进行排序?

$('#table').DataTable({ 
    responsive: true,
    "order": [[0, "desc"]],
    "columnDefs": [
        {
            "targets": [0],
            "visible": false,
            "searchable": false
        }
    ]
});
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<table id="table">
    <thead>
        <tr>
            <th>Numerical date</th>
            <th>Description</th>
            <th>String format date</th>
        </tr>
    <thead>
    <tbody>
        <tr>
            <td>20200801</td>
            <td>Record 1</td>
            <td>August 1, 2020</td>
        </tr>
        <tr>
            <td>20200701</td>
            <td>Record 2</td>
            <td>July 1, 2020</td>
        </tr>
        <tr>
            <td>20200501</td>
            <td>Record 3</td>
            <td>May 1, 2020</td>
        </tr>
        <tr>
            <td>20200401</td>
            <td>Record 4</td>
            <td>April 1, 2020</td>
        </tr>
    </tbody>
</table>

彼得·卡

您可以添加以下内容。您应该能够正确按日期排序:

"aoColumns": [{},{},{"bSortable": true, "sType": "date"}] 

在下面的演示中查看它的运行情况:

$('#table').DataTable({ 
    responsive: true,
    "order": [[2, "desc"]],
    "columnDefs": [
        {
            "targets": [0],
            "visible": false,
            "searchable": false
        }
    ],
    "aoColumns": [{},{},{"bSortable": true, "sType": "date"}]
});
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<table id="table">
    <thead>
        <tr>
            <th>Numerical date</th>
            <th>Description</th>
            <th>String format date</th>
        </tr>
    <thead>
    <tbody>
        <tr>
            <td>20200801</td>
            <td>Record 1</td>
            <td>August 1, 2020</td>
        </tr>
        <tr>
            <td>20200701</td>
            <td>Record 2</td>
            <td>July 1, 2020</td>
        </tr>
        <tr>
            <td>20200501</td>
            <td>Record 3</td>
            <td>May 1, 2020</td>
        </tr>
        <tr>
            <td>20200401</td>
            <td>Record 4</td>
            <td>April 1, 2020</td>
        </tr>
    </tbody>
</table>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章