数据表:排序不起作用

时间:2017-05-08 20:57:35

标签: javascript jquery html ajax thymeleaf

请帮忙。我不确定我哪里出错了 我希望表格按第一列排序。我尝试了几种变体,但排序不正常

dataTable = $("#deptDtTable").dataTable({
        "bFilter" : false
        "bProcessing" : true,
        "bServerSide" : true,
        "bSort" : true,
        "bStateSave" : false,
        "iDisplayLength" : 25,
        "iDisplayStart" : 0,
        "fnDrawCallback" : function() {
        },      
        "sAjaxSource" : "/url/url/datatable/dept",
        "aaSorting": [[ 1] ],
        "aoColumns" : [ 
            {
            "mData" : 'id'
        }, {
            "mData" : 'client_name' 
        }, {
            "mData" : 'ssn'
        }, {
            "mData" : 'department'
        }, {
            "mData" : 'account_id'
        }, {
            "mData" : 'dateEntered', 
            "render" : function(data) {
                if (data !== null) {
                    var date = new Date(data);
                    return date.toLocaleString();
                } else {
                    return '';
                }
            }
        } ]
    });

2 个答案:

答案 0 :(得分:1)

这就是我所做的,并且排序适用于第一列。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index62</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
    <link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
              $('#example').
                dataTable({
                "processing": true,
                "serverSide": true,
                "info": true,
                "stateSave": true,
                "ajax": {
                    "url": "/Home/AjaxGetJsonData",
                    "type": "GET"
                },
                "columns": [
                    { "data": "Name", "orderable": true },
                    { "data": "Age", "orderable": false },
                    { "data": "DoB", "orderable": true }
                ],
                "order": [[0, "asc"]]
            });
        });

    </script>
</head>
<body>
    <div style="margin:30px;">
        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr style="text-align:left;">
                    <th>Name</th>
                    <th>Age</th>
                    <th>DoB</th>
                </tr>
            </thead>

            <tfoot>
                <tr style="text-align:left;">
                    <th>Name</th>
                    <th>Age</th>
                    <th>DoB</th>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>

答案 1 :(得分:0)

您可以尝试这样

dataTable = $("#deptDtTable").dataTable({
        "bFilter" : false
         .......
        "aaSorting": [[ 0, "desc" ]] // Sort by first column descending
         ......
});