Ошибка загрузки данных строки из DataTable в localStorage с помощью пользовательской кнопки - PullRequest
Новая
       39

Ошибка загрузки данных строки из DataTable в localStorage с помощью пользовательской кнопки

1 голос
/ 08 мая 2019

Я использую плагин DataTables Jquery и пытаюсь создать собственный плагин Button, используя документацию на веб-сайте 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. Я попытался console.log-data данных строки с 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));
              }

и смог найти данные, у которых есть свойства 'header' и 'body'. Теперь мне нужно выяснить, как установить эти данные () в localStorage, так как они все еще не сохраняются в localStorage.

1 Ответ

1 голос
/ 08 мая 2019

Когда вы звоните .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();
            }
        }
    ]
} );
...