в jQuery DataTable в дом позиционирования для кнопок

Я только что обновил версию jQuery Datatable до 1.10. А затем я попытался удалить его отставной плагин, такой как" Colvis "и" Tabletools "с расширением" Button". Здесь все отлично работает.

но проблема для меня в том, что я не смог отделить кнопку "Colvis" от кнопок "Tabletool". 

"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'p>B",
    "buttons": [
        'copyHtml5',
        'excelHtml5',
        'csvHtml5',     
        {
            extend: 'colvis',
            postfixButtons: [ 'colvisRestore' ],
            columns: '0,1,2,3,4,5,6'
        }
    ],
    language: {
        buttons: {
            colvis: 'Change columns'
        }
    }

где в" sDom "буква" B " обозначает кнопки. Поэтому я получаю все четыре кнопки (Copy, Excel, CSV и Colvis) в одной строке. Но мне нужно кнопка "Colvis" должна быть отделена от (копировать, Excel и CSV).

Итак, есть ли способ добавить одну кнопку рядом с полем поиска и другую рядом с разбиением на страницы?

или

есть ли какая-либо конфигурация, доступная в "sDom" или в "Button"?

спасибо!

8
datatables datatables-1.10 javascript jquery

2 ответов

вы добавляете новые элементы в элементы управления dataTables dom с помощью <'.class'> или <'#id'>. Пример, вставьте новый <div id="colvis"> элемент слева от разбиения на страницы,<'#colvis'> до p :

"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'<'#colvis'>p>"

colvis buttons имеет класс .buttons-colvis, поэтому вы постоянно перемещаете их в введенный #colvis элемент by:

$('.buttons-colvis').detach().appendTo('#colvis')

это быстрый способ переместить кнопку colvis в другое место.

что касается предложения @GreeKatrina, да - но правильный метод размещения:

var colvis = new $.fn.dataTable.Buttons( table, {
    buttons: [
        {
            extend: 'colvis',
            ... 
        }
   ]
})
colvis.container().appendTo('#colvis')

если у вас #colvis элемент конечно.

мои рекомендации : Помимо вышеуказанного жестко закодированного решения, где вы специально нацелены на кнопки colvis, вы можете обезьяны патч dataTables кнопки так каждого расширенная кнопка может иметь . После инициализации кнопка перемещается в указанное container :

var org_buildButton = $.fn.DataTable.Buttons.prototype._buildButton;
$.fn.DataTable.Buttons.prototype._buildButton = function(config, collectionButton) {
   var button = org_buildButton.apply(this, arguments);
   $(document).one('init.dt', function(e, settings, json) {
       if (config.container && $(config.container).length) {
          $(button.inserter[0]).detach().appendTo(config.container)
       }
   })    
   return button;
}

использовать :

{
   extend: 'colvis',
   postfixButtons: [ 'colvisRestore' ],
   container : '#colvis', //<---
   columns: '0,1,2,3,4,5'
}

демо -> http://jsfiddle.net/v4bLv83h/

как показано в Примере, теперь вы можете указать альтернативный контейнер для каждой кнопки. Обратите внимание, что container может быть любым элементом, он не должен быть элементом, введенным dom. Также обратите внимание (как вы можете заметить в скрипке), что вам нужно сделать некоторый стиль, Если вы хотите сделать поток инжектированных элементов правильно вместе с собственными элементами управления, такими как блок разбиения на страницы.

9

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

объединение примеров из документации и вашего примера (не проверено):

var table = $('#myTable').DataTable( {
    dom: "B<'#colvis row'><'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'p>",
    buttons: [
        'copyHtml5',
        'excelHtml5',
        'csvHtml5'
    ]
} );

new $.fn.dataTable.Buttons( table, {
    buttons: [
        {
            extend: 'colvis',
            // Shorter than using the language.buttons.colvis option
            text: 'Change columns',
            postfixButtons: [ 'colvisRestore' ],
            columns: '0,1,2,3,4,5,6'
        }
    ]
} );

// To append it at the bottom of the table
// 3 since the colvis button is at the 3rd index in the buttons array
table.buttons( 3, null ).container().appendTo(
    table.table().container()
);

// To append it on the first row after the buttons, in the #colvis row
table.buttons( 3, null ).container().appendTo(
     $('#colvis'), table.table().container()
);

Если это не работает, позвольте мне знайте, и я обновлю свой ответ.

3