Настройка формата отображения для плагина Datatables в Boostrap 3 - PullRequest
Новая
       14

Настройка формата отображения для плагина Datatables в Boostrap 3

0 голосов
/ 01 ноября 2018

Я хочу переместить панель поиска рядом с позицией Show entries, то есть в левую позицию. У меня есть этот код стиля CSS, примененный к фильтру ввода: 

.dataTables_filter {
    width: 50%;
    float: left;
    text-align: left;
}

Он двигался влево, но не так, как ожидалось, он просто немного двигался влево, в центре. Как на следующем изображении:

enter image description here

Есть идеи, как это исправить? Другое приемлемое решение - просто поменять позицию Show entries и Search. Если это возможно, как я могу это сделать?

Что касается моего кода, я ничего особенного не сделал и импортировал библиотеку только из API datatables . Все, что у меня есть, это простой HTML-код для отображения таблицы.

Ответы [ 2 ]

0 голосов
/ 01 ноября 2018

Поскольку вы используете Bootstrap , я объясню, как работать с отображением элементов, связанных с плагином datatables . Datatables предоставляет способ настройки dom , другими словами, он позволяет вам настраивать отображение различных элементов, которые составляют часть таблицы. Они определены так:

Встроенные элементы управления таблицей в DataTables :

l - управление вводом с изменением длины
f - фильтрация ввода
т - Стол!
i - Таблица сводной информации
p - управление разбиением на страницы
r - элемент отображения обработки

И по умолчанию dom конфигурация для Bootstrap on Datatables следующие:

Для Bootstrap 3: 

"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>"

Для Bootstrap 4: 

"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"

Теперь настройка dom для Bootstrap 3 затем передается в следующую html разметку: 

<div class="row">
  <div class="col-sm-6">l</div>
  <div class="col-sm-6">f</div>
</div>
<div class="row">
  <div class="col-sm-12">tr</div>
</div>
<div class="row">
  <div class="col-sm-5">i</div>
  <div class="col-sm-7">p</div>
</div>

Именно поэтому при использовании следующего стиля CSS в элементе управления он просто переходит в середину страницы (обратите внимание, что элемент управления f обернут внутри col-sm-6 элемент): 

.dataTables_filter {
    width: 50%;
    float: left;
    text-align: left;
}

Хорошо, что вы можете изменить эту настройку при Datatables инициализации с помощью опции dom . В вашем конкретном случае вы можете попробовать следующие две настройки, однако вы можете немного поиграть, чтобы найти другую, которая вас убедит:

Настройка 1: 

"<'row'<'col-sm-3'l><'col-sm-3'f><'col-sm-6'>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>"

Это будет передано следующим html: 

<div class="row">
  <div class="col-sm-3">l</div>
  <div class="col-sm-3">f</div>
  <div class="col-sm-6"></div>
</div>
<div class="row">
  <div class="col-sm-12">tr</div>
</div>
<div class="row">
  <div class="col-sm-5">i</div>
  <div class="col-sm-7">p</div>
</div>

Настройка 2: 

"<'row'<'col-sm-6'<'pull-left'l><'pull-left'f>><'col-sm-6'>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>"

Это будет передано следующим html: 

<div class="row">
  <div class="col-sm-6">
    <div class="pull-left">l</div>
    <div class="pull-left">f</div>
  </div>
  <div class="col-sm-6"></div>
</div>
<div class="row">
  <div class="col-sm-12">tr</div>
</div>
<div class="row">
  <div class="col-sm-5">i</div>
  <div class="col-sm-7">p</div>
</div>

Чтобы применить пользовательские настройки, просто нажмите значение в опции dom при инициализации плагина, например: 

var domSetup = "<'row'<'col-sm-3'l><'col-sm-3'f><'col-sm-6'>>" +
               "<'row'<'col-sm-12'tr>>" +
               "<'row'<'col-sm-5'i><'col-sm-7'p>>";

$('#myTable').dataTable({
    /* Other initialization options */
    ...,
    "dom": domSetup
});

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

0 голосов
/ 01 ноября 2018

Попробуйте добавить pull-left класс на вашу панель поиска

...