Невозможно добавить пользовательский html в datatable

Question

Я пытаюсь добавить собственный заголовок html к своему datatable, в частности, я хочу изменить позицию поиска и длину слева и добавить пользовательский html направо, я пытаюсь этот код:

$(document).ready(function() {
     var table = $('#example').DataTable( {
          "dom": 'l<"toolbar">frtip'
    } );

    $("div.toolbar").html('<div class="float-right">'+
                        '<form class="form-inline">' +
                            '<div class= "form-group" > ' +
                                '<div class="input-group">' +
                                    '<input type="text" class="form-control form-control-light" id="dash-daterange">' +
                                    '<div class="input-group-append">' +
                                        '<span class="input-group-text bg-primary border-primary text-white">' +
                                            '<i class="mdi mdi-calendar-range font-13"></i>' +
                                        '</span>' +
                                    '</div >' +
                                '</div >' +
                            '</div >' +
                            '<a class="btn btn-primary ml-2">' +
                                '<i class="mdi mdi-filter-variant"></i>' +
                            '</a>'+
                        '</form>' +
                    '</div>');

} );

Я добавляю JSFiddle здесь .

Что я сделал не так?

UPDATE

Ожидаемый результат:

Show [10 v] entries             calendar[]  filter[]
Search...

Answer 1

Вы можете разделить сечение до <table> на два поля одинакового размера:

.dt-box {
  float: left;
  width: 50%;
}

dom: '<"dt-box"lf><"#toolbar.dt-box">rtip'

Головная боль - это элементы с тяжелым стилем, вы должны изменить несколько значений по умолчанию:

.dataTables_wrapper .dataTables_filter {
  clear: both;
  float: left !important;
  margin-top: 5px;
}
.dataTables_wrapper .dataTables_length {
  text-align: left !important;
  float: left;
}

Теперь вы можете добавить свою собственную форму по

$('#toolbar').html('....')

раздвоенная скрипка -> https://jsfiddle.net/xu4fdpk9/

NB. Дополнительное оформление необходимо, если вышеперечисленное должно быть адаптивным или, например, помещаться в очень узкую таблицу.

---

Я действительно не могу воспроизвести то, что вы описываете (или я могу неправильно понять), но вы можете обернуть .dt-box в гибкий контейнер:

.dt-flex {
  display: flex;
}

dom: '<"dt-flex"<"dt-box"lf><"#toolbar.dt-box">>rtip'

Не знаю, имеет ли это какое-то значение, но левая и правая dt-box гарантированно имеют одинаковую высоту.

Answer 2

Я не уверен, что понял. Вы хотите, чтобы поле «Поиск» и «Показать записи» находились слева, а какой-то пользовательский HTML-код, который, как я полагаю, является тем безымянным полем, - справа?

Я бы предложил добавить немного стиля для этого, что-то вроде (обновлено):

(<style type='text/css'>)

#example_wrapper {
  padding-top: 50px;
}

#example_filter {
  position: absolute;
  left: 0px;
  top: 30px;
}

#example_length 
{
  position: absolute;
  left: 0px;
  top: 0px;
}

.toolbar {
  position: absolute;
  top: 0px;
  right: 0px;
}

(</style>)