Question

我在DataTables上使用Export插件从表中导出过滤结果。您可以通过选择列标题上方的选择下拉列表来导出Excel文件，也可以单击为您过滤结果的自定义按钮，例如预先构建的过滤器。（我也在使用selectpicker）。但是，在DataTables中使用过滤器功能时，必须重写列标题。否则，您将获得包含select中所有数据的标题标题。所以我为“excelHtml5＆＃39;”添加了一个重写标题。按钮。这很棒！但它不能在我的自定义按钮上工作，并且“脱机导出”＃39;有谁知道解决方案？

$(document).ready(function () {
function getSearchParams(k){
    var p={};
    location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){p[k]=v})
    return k?p[k]:p;
}


var devicelist = $('#newdevicelist').DataTable({
        keys: true,
        autoFill: true,

        'iDisplayLength': 20,
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excelHtml5',


                title: $("#report_title").val(),
                exportOptions: {
                    format: {
                        header: function (data, columnIdx) {
                            return writeTitle(columnIdx) != '' ? writeTitle(columnIdx) : data;

                        },

                    }
                }
            },

            {
                text: 'Export Offline',
                title: 'Offline Report',
                filename: 'Offline Report',
 exportOptions: {
                    columns: ':visible',
                    format: {
                        header: function (data, column) {
                            return writeTitle(column) != '' ? writeTitle(column) : data;

                        },

                    }
                },
                action: function ( e, dt, node, config ) {
                    devicelist.search('').draw();
                    filterColumn( 5, 'Down');
                    filterColumn( 6, 'Disconnected');
                    filterColumn( 7, 'Offline');

                    $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node, config);
                },

            }





        ],
        "initComplete": function (settings, json) {

            this.api().columns([2, 4, 5, 6, 7, 8, 9, 10, 12, 13]).every(function () {
                var column = this;
                var header = this.header();

                var select = $('<select multiple class="selectsearch selectpicker' + column.index() + '" rel="' + column.index() + '" title="' + $(header).html() + '"><optgroup label="' + $(header).html() + '"><option></option></optgroup></select>')
                    .appendTo($(column.header()).empty())

                column.data().unique().sort().each(function (d, j) {

                    d = d.split('<p style="font-size: .01em;">').pop().split('</p>').shift();

                    if ( d != "" ) {
                        select.append('<option value="' + d + '">' + d + '</option>')
                    }
                });
            });

            $('.selectpicker2, .selectpicker3, .selectpicker4, .selectpicker5, .selectpicker6, .selectpicker7, .selectpicker8, .selectpicker9, .selectpicker10, .selectpicker12, .selectpicker13').selectpicker({
                style: 'btn-default',
                size: 4
            });


            $('#clear-all-cache').show();
            $('.select-type').show();

            $('.buttons-excel').html("<i class='fa fa-fw fa-file-excel-o'></i> Excel");

            $('div.dt-buttons').prepend('<a class="dt-button bg-blue buttons-html5" id="reset-list" href="#">Reset List</a>'               );



        },


    });
    function filterColumn(i, search) {
  //   alert( search + ' - ' + i);

    //  var query = "((  )|^)" + regex_escape(search) + "((  )|$)";
    $('#newdevicelist').DataTable().column(i).search(
        search,
        1, 0
    ).draw();


}
    });

DataTables自定义按钮导出更新标题

0 个答案: