@Leo,

You can overwrite Datatables style:

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting_desc_disabled:after {
    left: auto;
    right: 5px;
}

https://mdbootstrap.com/snippets/jquery/leographikgmail-com/2010869 this snippet doesn't work beacause Datatables component need additional imported js and css files. And this files aren't included in snippets js/css.

Best,

Thanks Mateusz,

For the footer the search i would like alternative input or select. Do you understand.

I would like other question. Is possible to position the arrow sorting in the left label column header. But when don't see the label is not align !

Hi @Leo,

To change "Show entries" text use this code:

$(document).ready(function () {
      $('#dtBasicExample').DataTable({
        "oLanguage": {
          "sLengthMenu": "Your _MENU_ text"
        }
      });
      $('.dataTables_length').addClass('bs-select');
    });

It is possible to use column name in search input e.g. placeholder:

$(document).ready(function () {
      $('#dt-filter-search').dataTable({

        initComplete: function () {
          this.api().columns().every(function (el) {

            var column = this;
            var search = $(
                `<input class="form-control form-control-sm" type="text" placeholder="${this.header().innerHTML}">`
                )
              .appendTo($(column.footer()).empty())
              .on('change input', function () {
                var val = $(this).val()

                column
                  .search(val ? val : '', true, false)
                  .draw();
              });

          });
        }
      });
    });

Best,