Кнопка DataTable TableTools Copy не работает

Во-первых, это сайт разработки, над которым я работаю. В настоящее время это находится в разработке, поэтому все может измениться еще до того, как вы ответите: http://wgarrisondev.mainstreethost.com/mage-product-redirects/public/

Вот мой код инициализации:

// DataTable editor plugin initialization    
var editor = new $.fn.dataTable.Editor( {
    ajax: function ( method, url, data, successCallback, errorCallback ) {
        successCallback( {"id": 4} );
    },
    table: "#grid-basic",
    dom: 'Tlfrtip',
    fields: [ {
            label: "Request URL:",
            name: "request-url"
        }, {
            label: "Target URL:",
            name: "target-url"
        }, {
            label: "Category:",
            name: "category"
        }
    ]
});
// DataTable Initialization
var dataTable = $('#grid-basic').DataTable({                
    responsive: true,
    columns: [
        { data: "request-url" },
        { data: "target-url" },
        { data: "category" },
        { data: null, defaultContent: '<button type="button" class="btn btn-xs btn-danger icon-delete"><span class="glyphicon glyphicon-remove"></span></button>', orderable: false }
    ]
});

// TableTools DataTable plugin initialization
var tableTools = new $.fn.dataTable.TableTools(dataTable, {
    "sSwfPath": swfPath,
    "aButtons": [
        "copy",
        {
            "sExtends": "collection",
            "sButtonText": "Export",
            "aButtons": ["csv", "xls", "pdf"]
        }
    ]
});
$( tableTools.fnContainer() ).addClass('pull-right').insertBefore('div.dataTables_wrapper');

// Set up editing of fields
$('#grid-basic').on( 'click', 'tbody td:not(:last-child)', function () {
    editor.inline( this );
} );

// Set up Removal functionality
$('#grid-basic').on('click', 'button.icon-delete', function() {
    dataTable.row($(this).parents('tr')).remove().draw();
});

У меня действительно странное поведение. Кнопка Копировать не работает. Однако, если я выберу один из трех других вариантов, а ЗАТЕМ нажму «Копировать», все будет работать нормально. Все остальные варианты работают нормально.

Обновить -
Я определил, что любая кнопка, которую я не добавляю в коллекцию, не будет работать, пока я не нажму на коллекцию хотя бы один раз... до сих пор не знаю

Обновление 2. Итак, я добился определенного прогресса. Мое приложение сначала требует, чтобы вы выбрали тип магазина и домен. На данный момент таблица, которую я использую, скрыта простой встроенной строкой style="display: none". После создания URL-адреса jquery показывает таблицу со всеми ее полями. Если я не скрою свою таблицу в начале, все кнопки экспорта будут работать нормально. Тем не менее, что-то в том, что стол изначально спрятан, все портит. Очевидно, я не могу все время скрывать свой стол, поэтому я все еще пытаюсь понять, почему это происходит. У этого переполнения стека был менее оцененный ответ, который указал мне на правильное направление.


javascript jquery datatables jquery-datatables-editor
person Bill Garrison    schedule 11.02.2015    source источник
comment
Я определил, что любая кнопка, которую я не добавляю в коллекцию, не будет работать, пока я не нажму на коллекцию хотя бы один раз... все еще не знаю   -  person Bill Garrison    schedule 12.02.2015

Ответы (1)


arrow_upward
0
arrow_downward

Итак, как я заявил в обновлении 2, проблема заключается в том, что если кнопки добавляются в таблицу, когда она скрыта (я использую загрузку, но это происходит независимо от того, используется ли скрытый класс или стиль без), когда он отображается, кнопки не хотят работать. Что-то в классе контейнера «решало» эту проблему, поэтому копия работала после щелчка.

Я до сих пор не знаю, почему это происходит, но вот как я это исправил. Теперь я добавляю кнопки ПОСЛЕ того, как я показываю таблицу следующим образом:

$('#grid-container').show(400); $( tableTools.fnContainer() ).addClass('pull-right').insertBefore('div.dataTables_wrapper');

Это означает, что они не становятся жертвами переходов и работают нормально.

person Bill Garrison    schedule 12.02.2015
comment
Я должен был создать новый div перед моей таблицей данных, и я хотел бы просто: $(tableTools.fnContainer()).appendTo('#divId');. Я также использовал начальную загрузку, и с помощью insertingBefore/добавления/добавления к оболочке datatable уничтожил бы пользовательский интерфейс. Рад, что у тебя тогда все получилось. Молодец - person jorrin; 13.02.2015