WhiteBearDev

Нашел решение. Как оказалось нельзя использовать colspan, если у тебя нет, как минимум, 2х строк thead, т.е. colspan применим только к complex header.
Фикс:

...
<thead class="bg text-white font-weight-bold">
    <tr class="d-none">
        <th></th>
        <th></th>
        <th></th>
        <th class="d-none d-md-table-cell"></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <th colspan="3">Объявление</th>
        <th class="d-none d-md-table-cell" data-toggle="tooltip" data-placement="top" title="Сортировать">Дата</th>
        <th data-toggle="tooltip" data-placement="top" title="Сортировать">Статус</th>
        <th data-toggle="tooltip" data-placement="top" title="Сортировать">Цена</th>
    </tr>
</thead>
...

и еще 1 параметр к инициализации DataTable:

columnDefs: [
    { orderable: false, targets: [ 0, 1, 2 ] }
]

Пасибки WhiteBearDev, хоть я и не въехал сразу.

Оберните h3 и input в div.
Div'у дайте свойство "display: flex"

вот ошибка https://habrastorage.org/webt/pw/x0/nh/pwx0nhgqpj9...
тут не хватает квадратной скобки https://habrastorage.org/webt/ys/5f/ij/ys5fijgkae6...

просто сначала у всех удалить, и тут же добавить нужному active)

$('li').removeClass('active');

$(this).addClass('active')