简体   繁体   English

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

[英]How to apply columnDefs on jquery Datatable with saveState opiton to true

I have the following very simple example using jQuery Datatables v1.10 . 我有以下使用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>

Simple and works just fine. 简单,工作正常。 Remove the Sorting options from the columns just as I want to. 就像我想要的那样,从列中删除“ Sorting选项。 However I want to use the stateSave option: 但是我想使用stateSave选项:

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

But now the sorting is again available for all columns (the configuration from columnDefs is not applied). 但是现在排序再次适用于所有列(不应用columnDefs的配置)。

So what I want to achieve is using the stateSave but still have the configuration for the sorting applied. 所以我想实现的是使用stateSave但仍然应用了排序的配置。

I am playing with 我在玩

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

Like so: 像这样:

 $(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 }
            ]
        });
    });

But I am still not able to reapply the sorting options 但是我仍然无法重新应用排序选项

The whole config should only be one object. 整个配置只能是一个对象。 You are creating multiple objects and therefore multiple arguments for the main datatable() function. 您正在创建多个对象,并因此为main datatable()函数创建了多个参数。 Only the first argument is used for setting the internal options and the others are being ignored 仅第一个参数用于设置内部选项,其他参数被忽略

Try 尝试

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM