如何在 [=10th=] 数据表上应用 columnDefs，并将 saveState 选项设置为 true

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>0,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 }
    ]
  });
});

如何在 [=10th=] 数据表上应用 columnDefs，并将 saveState 选项设置为 true

How to apply columnDefs on jquery Datatable with saveState opiton to true

javascript

jquery

datatables-1.10