Question

我正在使用DataTables Jquery插件，并且尝试使用the documentation on the DataTable website创建自定义Button插件。我可以将行数据加载到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记录到行数据中，以查看该数据是否可从该事件中提取，但是随后出现错误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”属性的数据。现在，我需要弄清楚如何将这些数据setItem（）放入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();
            }
        }
    ]
} );

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

1 个答案: