Как динамически передать «страницу» в exportOptions> модификатор в Datatable - PullRequest
Новая
       26

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

0 голосов
/ 30 мая 2019

Для экспорта данных таблицы в файл 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());
        }
     }
   });
});

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

1 Ответ

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

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

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

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

  2. Второй подход заключается в удалении старой кнопки «Экспорт в Excel» и создании новой кнопки в соответствии с текущим режимом динамически .Поскольку будет состояние двух режимов (текущий и все), я создаю 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(); });

Демонстрация:

enter image description here

Чтобы играть в онлайн, нажмите фрагмент кода запуска 

<!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>
                        <123414124124.null@domain.com>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <123414124124.null@domain.com>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <123414124124.null@domain.com>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <123414124124.null@domain.com>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <123414124124.null@domain.com>
                    </td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>
                        <123414124124.null@domain.com>
                    </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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...