Question

我使用jQuery Datatables v1.10进行了以下非常简单的示例。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

 <script
          src="https://code.jquery.com/jquery-1.12.4.min.js"
          integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
          crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

<script>
    $(document).ready(function() {
        $('#example').DataTable(
            {
            "columnDefs": [
                { "orderable": false, "targets": 1 },
                { "orderable": false, "targets": 2 }
            ]
        });
    });
</script>  
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
</head>
<body>
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
 </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
 </table>

</body>

</html>

简单，工作得很好。按照我的意愿从列中删除Sorting选项。但是我想使用stateSave选项：

$(document).ready(function() {
        $('#example').DataTable(
            { stateSave: true},
            {
            "columnDefs": [
                { "orderable": false, "targets": 1 },
                { "orderable": false, "targets": 2 }
            ]
        });
    });

但是现在排序再次适用于所有列（columnDefs的配置未应用）。

所以我想要实现的是使用stateSave但仍然具有应用排序的配置。

我正在玩

"stateLoadParams": function (settings, data) {
                //console.log(settings);
                settings.aoColumns[1].orderable = false;
                console.log(settings);
            }

像这样：

 $(document).ready(function() {
        $('#example').DataTable(
            { stateSave: true,
            "stateLoadParams": function (settings, data) {
                //console.log(settings);
                settings.aoColumns[1].orderable = false;
                console.log(settings);
            }},
            {
            "columnDefs": [
                { "orderable": false, "targets": 1 },
                { "orderable": false, "targets": 2 }
            ]
        });
    });

但我仍然无法重新应用排序选项

Answer 1

整个配置应该只是一个对象。您正在创建多个对象，因此为主datatable()函数创建了多个参数。只有第一个参数用于设置内部选项，其他参数被忽略

尝试

$(document).ready(function() {
  $('#example').DataTable({
    stateSave: true, 
    columnDefs : [
          { "orderable": false, "targets": 1 },
          { "orderable": false, "targets": 2 }
    ]
  });
});

如何将带有saveState opiton的jquery Datatable上的columnDefs应用于true

1 个答案: