Datatable styling, так что кнопка бутстрапа появляется в том же ряду, что и другие элементы

Я использую плагин jQuery DataTables и Bootstrap на моем сайте rails. Я не могу заставить свою пользовательскую кнопку и другие элементы заголовка таблицы входить в одну и ту же строку, они сложены вместо встроенного.

Любые предложения, чтобы все они были на одной строке?

Вот некоторые из JavaScript, которые я использовал:

$(document).ready(function() {
  $('#products').DataTable( {
    dom: 'Blfrtip',
    buttons: [ {
      text: 'Pull my products',
      action: function ( e, dt, node, config ) {
        alert( 'Button activated' );
      }
    }]
  });
});

Ответ 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 для кода и демонстрации.

Ответ 2

Вам нужно поместить два div: один для кнопок с данными и другие для вашего пользовательского кода.

       var table = $("#tbl_oferta").dataTable({
                dom: '<"pime-grid-button"B><"pime-grid-filter">frtip',
        ...
       });

       $("div.pime-grid-filter").html('<b>Custom tool bar! Text/images etc.</b>');

Затем определите класс div в вашем css:

.pime-grid-button{float:left}
.pime-grid-filter{float:left;margin-left:10px}

Пример изображения

Ответ 3

Поместите style="display: inline" на элементы, которые вы хотите отобразить в строке.

Ответ 4

Посмотрите на документацию DataTable Здесь.

попробуйте dom: '<"toolbar">frtip'