Jquery Bootstrap Datatable 排序无法正常工作答案

【问题标题】：Jquery Bootstrap Datatable sorting not working properlyJquery Bootstrap Datatable 排序无法正常工作
【发布时间】：2016-09-06 05:59:38
【问题描述】：

$("#tbllistOPDetails").DataTable({
     "scrollY": scrollY,
     "scrollX": true,
     "paging": true,
     "scrollCollapse": true,
     "searching": false,
     "orderCellsTop": true,
     "info": true,
 });

以上是我的数据表代码，排序不正常。

【问题讨论】：

年龄列无法正常进行排序。我是对的。
与@Singh 表中的 Age 列无关
您在哪里遇到问题？你能显示你的浏览器控制台吗？ @Devasish

标签： jquery twitter-bootstrap

【解决方案1】：

给你：

$("#tbllistOPDetails").DataTable({
    aaSorting": [],
    "bSorting": false,
    "bProcessing": false,
    "bPaginate": false,
    "bFilter": false,
    "bDestroy": false,
    "bAutoWidth": true,
    "sScrollY": "scrollY", //Put height if you want
    "aoColumns": [
                    { "sTitle": "ID", "sType": 'numeric'  },
                    { "sTitle": "Name" },
                    { "sTitle": "Age", "sType": 'numeric' },
                     |
                     |
                     |
                     |
                     |
                     |
                    { "sTitle": "Preference" }
                ],

    "aaData": DataName
});

你必须告诉数据表列类型。所以它会正确排序。

【讨论】：

“aaData”的用途是什么：DataName
有关 aaData 的信息。 stackoverflow.com/q/5105731/3081659

【解决方案2】：

你可以查看https://datatables.net/plug-ins/sorting/网站上的文档，这很容易实现

    <script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.numericComma.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example').dataTable( {
            "columnDefs": [
                { "type": "numeric-comma", targets: 3 }
            ]
        } );
    } );
</script>

示例https://datatables.net/examples/plug-ins/sorting_manual

【讨论】：

【解决方案3】：

您可以使用此代码。这有助于获得desc 的年龄顺序。你可以改成asc下单。

在https://datatables.net/examples/basic_init/table_sorting.html了解更多详情

$("#tbllistOPDetails").DataTable({               
            "order": [[ 2, "desc" ]]
        });

【讨论】：

【解决方案4】：

尝试如下

$("#tbllistOPDetails").DataTable({
    "scrollX": true,
    "paging": true,
    "scrollCollapse": true,
    "searching": false,
    "orderCellsTop": true,
    "info": true,
});

只需从脚本中删除 "scrollY": scrollY,

【讨论】：

您在哪里遇到问题？ @Devasish