datatables search footer


Topic: datatables search footer

Leo asked 5 years ago

Hello,

I would like to combine in the footer datatables column label and search is possible ?

Is possible choice the type search text or select for each column ?

Is possible to change the default "Show entries" ?

Thanks


Mateusz Łubianka staff answered 5 years ago

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,


Leo answered 5 years ago

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 ! Position sorting header


Mateusz Łubianka staff commented 5 years ago

@Leo,

Here you can find version with select: https://mdbootstrap.com/docs/jquery/tables/datatables/#filter-select with search input: https://mdbootstrap.com/docs/jquery/tables/datatables/#filter-search If you want to use mixed (select/search) you must use your custom code. Can you show code snippet or live example with topic from the second question?

Best,


Leo commented 5 years ago

For the second question : I would like the arrow no left but to the right of the label.

Info ! My Snippet and your snippet not working online. Is normal ?

My Snippet : https://mdbootstrap.com/snippets/jquery/leographikgmail-com/2010827 Furthermore why my width is not working ?

And example of your snippet not working https://mdbootstrap.com/snippets/jquery/leographikgmail-com/2010869


Mateusz Łubianka staff answered 5 years ago

@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,


Leo commented 5 years ago

Thanks @Mateusz Łubianka

is ok for the arrow thanks but the text is margin left ... How delete this spacing also ?


Grzegorz Bujański staff commented 5 years ago

Do you mean padding left? Try this: table.dataTable thead th { padding-left: 0; }


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.16.0
  • Device: Imac 27\\
  • Browser: Chrome
  • OS: Max OS Catalina
  • Provided sample code: No
  • Provided link: No
Tags