javascript - 使用自定义按钮将行数据从 DataTable 加载到 localStorage 时出错

Question

我正在使用 DataTables Jquery 插件，我正在尝试使用 the documentation on the DataTable website 创建自定义按钮插件.我可以在其中将行数据加载到 localStorage 中。我们将此按钮称为“内部保存”

"buttons": [
            {
              text: 'Save Internally',
              action: function ( e, dt, node, config ) {
                var data = dt.rows( { selected: true } ).data();
                localStorage.setItem("datatable1", JSON.stringify(data));
                  }
                }
              ]

当我实现和测试它时，我似乎无法将任何东西存储到 localStorage 中。我尝试使用 JSON.stringify console.log-ing 行数据以查看是否可以从事件中提取数据，但随后出现错误 TypeError: Converting circular structure to JSON。如果没有 JSON.stringify，它会给我 Object Object。

我尝试用

测试行数据

                for (var key in data) {
                  if (data.hasOwnProperty(key)) {
                    console.log(key);

查看对象是否有任何属性或键，但没有。

行在前端的结构方式如下。

<div class="jumbotron container" id="viewtableresult">
<table id="example" class="display table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Name</th>
                <th>Column 3</th>
                <th>Column 4</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Column 1</th>
                <th>Name</th>
                <th>Column 3</th>
                <th>Column 4</th>
            </tr>
        </tfoot>
</table>
</div>

我知道我只能将字符串存储到 localStorage 中，但不知道对象的结构，我不知道如何正确地将对象字符串化。我确信必须有一种简单的方法能够将 DataTable 插件中的行数据存储到 localStorage。

更新:我发现有一个 API method called : buttons.exportdata()

使用它我将代码更改为以下内容:

              text: 'Save Internally',
              action: function ( e, dt, node, config ) {
                var rows = dt.rows( { selected: true } ).data(); //irrelevant now
                var data = table.buttons.exportData( {
                    modifier: {
                        selected: true
                    }
                } );
                console.log( JSON.stringify(data) ) //was able to show the data in strings
                localStorage.setItem("testdata", JSON.stringify(data));
              }

并且能够找到具有“header”和“body”属性的数据。现在我需要弄清楚如何将这些数据设置到 localStorage 中，因为它仍然没有存储到 localStorage 中。

Answer 1

当您调用 .data() 时，您将获得一个包含所有行和函数的对象。您只需要行，因此您应该调用 .toArray()。

var data = dt.rows( { selected: true } ).data().toArray();

我还创建了 jsFiddle 示例，我在其中保存到本地存储并从中读取:jsFiddle link

存储和加载数据的相关代码:

 $('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        {
            text: 'Export',
            action: function ( e, dt, node, config ) {
            var data = dt.rows( { selected: true } ).data().toArray();
            var json = JSON.stringify(data)
            localStorage.setItem('exportedData', json);
            }
        },
        {
            text: 'Load',
            action: function ( e, dt, node, config ) {
            var data = JSON.parse(localStorage.getItem('exportedData'));
            dt.clear();
            dt.rows.add(data).draw();
            }
        }
    ]
} );