时间戳

首页 > 解决方案 > 使用自定义按钮将行数据从 DataTable 加载到 localStorage 时出错

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

问题描述

我正在使用 DataTables Jquery 插件，并且正在尝试使用DataTable 网站上的文档创建自定义按钮插件。我可以将行数据加载到 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 对行数据进行控制台记录，以查看数据是否可从事件中提取，但随后出现错误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 方法叫做：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));
              }

并且能够找到具有“标题”和“正文”属性的数据。现在我需要弄清楚如何将这些数据 setItem() 放入 localStorage，因为它仍然没有存储到 localStorage 中。

标签： javascriptjquerydatatableslocal-storagejavascript-objects

解决方案

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

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

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

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

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

推荐阅读