Загрузить отфильтрованные данные таблицы HTML в CSV-файл - PullRequest
0 голосов
/ 04 июня 2019

Я создал файл ejs, который может отображать документы из коллекции mongodb db в таблицу, и добавил select:option, который может фильтровать таблицу. например, select:option из date Я выбираю 05/28/2019, он будет отображать только данные с 05/28/2019 датой. и у меня уже есть форма загрузки, которая может загрузить таблицу, однако кнопка загрузки загружает только все данные в таблицу и не может загрузить отфильтрованные данные.
Мой вопрос: если после фильтрации данных в таблице и нажатия кнопки «загрузить» будут загружены только отфильтрованные данные, а не вся таблица.
См. пример кода здесь https://jsfiddle.net/indefinite/b63y928L/9/
это код, который может фильтровать таблицу

$(document).ready(function () {

    $('.filter').change(function () {
            var values = [];

             $('.filter').each(function () {
                    var colIdx = $(this).data('col');

                     $(this).find('option:selected').each(function () {
                             if ($(this).val() != "") values.push( {
                                    text: $(this).text(),
                                    colId : colIdx
                             });
                    });
            });
            filter('table > tbody > tr', values);
    });

    function filter(selector, values) {console.log(values);
            $(selector).each(function () {
                    var sel = $(this);
                    var tokens = sel.text().trim().split('\n');
                    var toknesObj = [], i;
                    for(i=0;i<tokens.length;i++){
                            toknesObj[i] = {
                                 text:tokens[i].trim(), 
                                 found:false
                            };
                    }

                    var show = false;
                    //console.log(toknesObj);
                    $.each(values, function (i, val) {                

                 if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
                         toknesObj[val.colId].found = true;
                        }

                    });          
                    console.log(toknesObj);
                    var count = 0;
                     $.each(toknesObj, function (i, val) {
                             if (val.found){
                                     count+=1;
                             }
                     });
                    show = (count === values.length);        
                    show ? sel.show() : sel.hide();
            });
    }

и это то, что я следовал за тем, как загрузить HTML-таблицу в CSV-файл https://codepen.io/malahovks/pen/gLxLWX?editors=1010
Я ожидаю, что после выбора даты будут загружены данные только за выбранную дату. Спасибо!

1 Ответ

2 голосов
/ 04 июня 2019

Вы можете изменить селектор строк, чтобы выбрать только видимые строки. var rows = $("table tr:visible");. Поскольку вы уже используете библиотеку jquery, вы можете использовать селектор jquery.

function export_table_to_csv(html, filename) {
    var csv = [];
    //var rows = document.querySelectorAll("table tr:visible");
    var rows = $("table tr:visible");

    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll("td, th");

        for (var j = 0; j < cols.length; j++) 
            row.push(cols[j].innerText);

        csv.push(row.join(","));        
    }

    // Download CSV
    download_csv(csv.join("\n"), filename);
}

см. Обновленную скрипку https://jsfiddle.net/165yj7se/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...