Ответ 1
РЕШЕНИЕ № 1
Это самая запутанная часть с использованием стиля Bootstrap для jQuery DataTables и до сих пор недокументирована. Расширение Bootstrap переопределяет значение по умолчанию dom, которое можно подтвердить, просмотрев его исходный код.
Вам нужно использовать специально созданную dom, как показано ниже:
dom:
"<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
Вы можете быть настолько креативны, насколько хотите, используя классы Bootstrap row и col-* в dom.
Смотрите этот jsFiddle для кода и демонстрации.
РЕШЕНИЕ # 2
Вы также можете использовать метод прямой вставки, как показано в в этом примере, потому что по умолчанию dom, который используется для стиля Bootstrap довольно сложно.
var table = $('#example').DataTable({
initComplete: function(){
var api = this.api();
new $.fn.dataTable.Buttons(api, {
buttons: [
{
text: 'Pull my products',
action: function ( e, dt, node, config ) {
alert( 'Button activated' );
}
}
]
});
api.buttons().container().appendTo( '#' + api.table().container().id + ' .col-sm-6:eq(0)' );
}
});
Обратите внимание, что код отличается от приведенного выше примера, потому что есть issue с DataTables 1.10.9, предотвращающим прямую вставку кнопок, если не является символом B в dom или dom не указывается.
Смотрите этот jsFiddle для кода и демонстрации.
