Как сохранить все данные DataTable в массиве javascript после поиска по столбцу? - PullRequest
0 голосов
/ 26 марта 2020

У меня есть таблицы точно так же, как описано в https://datatables.net/examples/api/multi_filter.html. Моя структура кода точно такая же (см. Полный код и демонстрацию, используя ссылку).

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change clear', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );

Теперь я хочу вернуть все записи (строки) в таблице после выполнения операции поиска, либо через console.log(), либо сохранить данные в массиве javascript.

Например, после поиска Бухгалтер в столбце Position я хочу получить все данные, хранящиеся в javascript массиве

enter image description here

[[Airi Satou,Accountant,Tokyo,33,2008/11/28,$162,700],
[Garrett Winters,Accountant,Tokyo,63,2011/07/25,$170,750]]

Я пробовал что-то вроде console.log( table.row( this ).data() );, но не сработало. Как этого добиться?

Ответы [ 2 ]

1 голос
/ 26 марта 2020

Попробуйте добавить этот код после .draw()

table.rows().$('tr', {"filter":"applied"}).each( function () {
  console.log(table.row(this).data())
});

Образец результата:

  • Несколько
Array(6) [ "Airi Satou", "Accountant", "Tokyo", "33", "2008/11/28", "$162,700" ]
Array(6) [ "Dai Rios", "Personnel Lead", "Edinburgh", "35", "2012/09/26", "$217,500" ]
Array(6) [ "Jena Gaines", "Office Manager", "London", "30", "2008/12/19", "$90,560" ]
Array(6) [ "Zenaida Frank", "Software Engineer", "New York", "63", "2010/01/04", "$125,250" ]
  • Single
Array(6) ["Zenaida Frank", "Software Engineer", "New York", "63", "2010/01/04", "$125,250"]

Я также создал кодовую ручку на тот случай, если вы захотите попробовать: Поиск по отдельному столбцу (ввод текста)

0 голосов
/ 27 марта 2020

Благодаря ответу Паоло я получил представление о том, что мне делать. Мой ответ - альтернатива ответу Паоло. Вместо того, чтобы возвращать массив каждый раз, когда я печатаю в поле поиска, я добавляю кнопку отправки после применения фильтра к моей таблице. Таким образом, возвращаемый массив будет таким же, как данные, показанные в таблице после фильтрации.

var table = $('#tableViewer').DataTable({
            "pageLength": 5,
            "lengthMenu": [[5, 50, 100, -1], [5, 50, 100, "All"]],
            "dom": 'lfrtipB',  // component position
            buttons: [
                {
                    text: 'Run',
                    action: function (e, dt, node, config) {
                        plainArray = table.rows({ search: 'applied' }).data().toArray();
                        for (var x = 0; x < plainArray.length; x++) {
                            console.log(plainArray[x]);
                        }
                    }
                }
            ]
        });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...