Как динамически передать «страницу» в exportOptions>modifier в Datatable

Для экспорта данных таблицы в файл excel я написал код ниже.

"buttons": [
        {
            extend: 'excelHtml5',
            text: 'Excel Export',
            filename: function () { return 'AllLists_' + time; },
            exportOptions: {
                columns: [0, 1, 2, 3, 4, 5, 6, 7],
                modifier: {
                    page: 'current',                        
                }
            },
        }
    ],

Здесь в строке page: 'all/current' хочу выбрать динамически, поэтому для этого я пишу ниже код.

<select class = "form-control" id = "selectDataOption">
     <option value = "current">Current page</option>
     <option value = "all">Entire table</option>
</select>

Я использовал приведенный ниже код для динамического выбора раскрывающегося списка -

$("#exportExcelbtn").on("click", function () {
  dt_tblOutForApproval.buttons.exportData({
    modifier: {
        page: function () {
            return ($("#selectDataOption").children("option").filter(":selected").val());
        }
     }
   });
});

Но это не помогает. может ли кто-нибудь помочь мне найти лучшее решение или я что-то упустил в своем решении?

jquery datatable datatables

30.05.2019 14:11

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

2 244

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

dt_tblOutForApproval.buttons.exportData() — это не функция, которая экспортирует данные в файл, а функция, которая возвращает данные.

Что касается вашего вопроса, есть два возможных способа сделать это:

Поскольку DataTable не позволяет нам снова инициализировать параметры, мы можем удалить необработанную таблицу и создать новую. Но это не эффективный способ.

Второй подход — удалите старую кнопку «Excel Export» и создайте новую кнопку в соответствии с текущим режимом динамически. Так как будет состояние двух режимов (текущий и все), я создайте ExcelExportManager() для управления текущим режимом (состоянием):

// dt is an object created by `$('#example').DataTable({})`
function ExcelExportManager(dt){ 
    function _createExportButtonOpt(pageOpt = "current"){
        return {
            extend: 'excelHtml5',
            text: 'export ' + pageOpt,
            name : pageOpt,        // button name
            filename: function () { return 'AllLists_' + time; },
            exportOptions: {
                //columns: [0, 1, 2, 3, 4, 5, 6, 7],
                modifier:{ page: pageOpt }, 
            },
        };
    };

    function _setModeAsCurrent(){
        var current= dt.button().remove(0, "current:name");
        var current= dt.button().remove(0, "all:name");
        var current= dt.button().add(0, _createExportButtonOpt("current"));
    }

    function _setModeAsAll(){
        var current= dt.button().remove(0, "current:name"); 
        var current= dt.button().remove(0, "all:name");
        var current= dt.button().add(0, _createExportButtonOpt("all"));
    }

    var mode = "current";  // initial value
    Object.defineProperty(this,"exportMode",{
        get:function(){ return pageMode; },
        set:function(value){
            switch(value.toLowerCase()){
                case "current":
                    _setModeAsCurrent();
                    break;
                case "all":
                    _setModeAsAll();
                    break;
                default:
                    throw new Error("unsupported export mode");
            }
            mode = value;
        },
    });
};

// create an instance
var excelManager = new ExcelExportManager(dt_tblOutForApproval);

Таким образом, когда мы хотим изменить режим, мы можем просто установите свойство excelManager.exportMode:

// a function that get current option selected by user
function getExportMode(){
    return exportOption=$("#selectDataOption").children("option")
        .filter(":selected")
        .val();
}
 // initialize 
excelManager.exportMode = getExportMode();
// on change
$("#selectDataOption").change(function() { excelManager.exportMode = getExportMode(); });

Демо:

Чтобы играть онлайн, нажмите на фрагмент кода «Выполнить».

<!DOCTYPE html>
<html>

<head>
    <script src = "http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link rel = "stylesheet" type = "text/css"
        href = "https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-html5-1.5.6/datatables.min.css" />

    <script type = "text/javascript"
        src = "https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-html5-1.5.6/datatables.min.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
</head>

<body>
    <div class = "container">
        <table id = "example" class = "display nowrap" width = "100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>

            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>

            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$3,120</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Director</td>
                    <td>Edinburgh</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$5,300</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <[email protected]>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <[email protected]>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <[email protected]>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <[email protected]>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <[email protected]>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <[email protected]>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
            </tbody>
        </table>
    </div>
    <select class = "form-control" id = "selectDataOption">
        <option value = "current">Current page</option>
        <option value = "all">Entire table</option>
    </select>
</body>

<script>
    $(document).ready(function () {

        var time = new Date();
        var dt_tblOutForApproval = $('#example').DataTable({
            dom: 'Bftrip',
            paging: true,
            pageLength: 5,
            buttons: [ ]
        });

        // dt is an object created by `$('#example').DataTable({})`
        function ExcelExportManager(dt){ 
            function _createExportButtonOpt(pageOpt = "current"){
                return {
                    extend: 'excelHtml5',
                    text: 'export ' + pageOpt,
                    name : pageOpt,        // button name
                    filename: function () { return 'AllLists_' + time; },
                    exportOptions: {
                        //columns: [0, 1, 2, 3, 4, 5, 6, 7],
                        modifier:{ page: pageOpt }, 
                    },
                };
            };

            function _setModeAsCurrent(){
                var current= dt.button().remove(0, "current:name");
                var current= dt.button().remove(0, "all:name");
                var current= dt.button().add(0, _createExportButtonOpt("current"));
            }

            function _setModeAsAll(){
                var current= dt.button().remove(0, "current:name"); 
                var current= dt.button().remove(0, "all:name");
                var current= dt.button().add(0, _createExportButtonOpt("all"));
            }

            var mode = "current";  // initial value
            Object.defineProperty(this,"exportMode",{
                get:function(){ return pageMode; },
                set:function(value){
                    switch(value.toLowerCase()){
                        case "current":
                            _setModeAsCurrent();
                            break;
                        case "all":
                            _setModeAsAll();
                            break;
                        default:
                            throw new Error("unsupported export mode");
                    }
                    mode = value;
                },
            });
        };

        function getExportMode(){
            return exportOption=$("#selectDataOption").children("option")
                .filter(":selected")
                .val();
        }
        var excelManager = new ExcelExportManager(dt_tblOutForApproval);
        // initialize 
        excelManager.exportMode = getExportMode();
        // on change
        $("#selectDataOption").change(function() { excelManager.exportMode = getExportMode(); });
    });
</script>

</html>

31.05.2019 09:34

Другие вопросы по теме

Primefaces DataTable var, используемый для создания столбцов, не отображает ни одной строки

Pandas Python — сравнение разных диапазонов дат и проверка того, находятся ли они в одном и том же периоде времени

В datatable initComplete не вызывается после table.ajax.reload();

Как добавить обработчик событий Double_Click в таблицу данных?

Как получить таблицу пропорций на основе информации из двух разных таблиц в R

Реализовать опцию «Выбрать все» в реактивном блестящем

Накопительная сумма по ID с отставанием

Как создать заголовок сворачиваемого столбца в таблице данных?

Выберите только одну строку в компоненте таблицы ant-design

Как отобразить столбцы массива в DataGridView

Как динамически передать «страницу» в exportOptions>modifier в Datatable

Ответы 1

Другие вопросы по теме

Похожие вопросы