How can I change the dropdown of 'show entries' and 'search bar'?

dataphpmysql

Hello, so this question is very similar to the one I made last year but unfortunately I still have the issue: https://www.datatables.net/forums/discussion/48759/how-can-i-access-edit-the-show-entry-dropdown-select#latest

So I'm using MDB4 Pro framework with datatable and I'm trying to change the drop-down of the 'show entries' by using the material select: https://mdbootstrap.com/docs/jquery/forms/select/. Last time someone said to use this code:

                initComplete: function () {
                    $('select[name="dtBasicExample_length"]').addClass('mdb-select');
                    $('.mdb-select').material_select();
                },

But it is not working.

I'm also trying to do the same thing with the search bar by changing it to the material input: https://mdbootstrap.com/docs/jquery/forms/inputs/ .

Any idea on how to change both the dropdown of show entries and the search bar of search to work with the material design ones? PS: I know they have a datatables plugin but is filled with errors so can't use that.

Thanks in advance.

colin

Hi @dataphpmysql ,

The best way to progress this would be to modify the test case Kevin create on that thread you linked to, showing the problem. That would give us something to work with,

Cheers,

Colin

dataphpmysql

Hi @colin

I have created a snippet, is not 100% the same way I have it, but you can see the issues: https://mdbootstrap.com/snippets/jquery/jonathan-2/1084811?view=side#css-tab-view. The folders can't be visible since is the pro version, but at least it works for testing.

As you can see, the drop-down of 'show entries' is not showing - I will like to add the material select: https://mdbootstrap.com/docs/jquery/forms/select/. I tried using this code but it doesn't work:

             initComplete: function () {
                  $('select[name="dtBasicExample_length"]').addClass('mdb-select');
                  //If I make this initialization it would duplicate the drop-down on top + still 
                  not work
                  //$('.mdb-select').material_select();
             },

I would also like to change the 'search bar' into this material input: https://mdbootstrap.com/docs/jquery/forms/inputs/. How can I "access" the search bar in order to make this change?

As a side note I have two more questions:
1. if you see the child row, you'll see that it looks different as compared to this one: https://datatables.net/examples/api/row_details.html. My child table appears with a line on top like a border, even though it has the same code as the example but maybe is the mdb framework that's adding border/padding to the child table; anyhow, I have tried to put everything zero and it still doesn't work, any idea how to fix it?
2. How can I make the datatable only appear and be called after clicking the 'submit' button as opposed to loading automatically after the page loads?

Thanks in advance.

allan

1)

As you can see, the drop-down of 'show entries' is not showing

The select element has a style of display: none!important; on it which is why it isn't displaying. Assuming that $().material_select() is how to convert a select element into one which is MD Bootstrap styled, this is all that should be needed I would have thought:

$('div.dataTables_length select', this.api().table().container()).material_select();

However it is still hidden. You'd need to ask the MD Bootstrap folks why that isn't enough.

2)

How can I "access" the search bar in order to make this change?

Inside initComplete:

$('div.dataTables_filter input', this.api().table().container())

will give you the input element.

3)

My child table appears with a line on top like a border

That's coming from the styling:

.table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

You could override that with something like:

.table td .table td {
  border-top: none;
}

You might need to modify other MD Bootstrap styles to suit your needs as well. That's outside of the scope of the support we can offer for free.

4)

How can I make the datatable only appear and be called after clicking the 'submit' button as opposed to loading automatically after the page loads?

Stick it in a display: none -tag divand only make itdisplay: block` when your custom button is pressed. Also only initialise the DataTable at that time rather than on document ready.

Allan

dataphpmysql

Thanks a lot for you help allen!

dataphpmysql

I'm still not able to add the drop-down or the search bar to DataTables. I asked the MDB folks but no answer. I'm literally not able to use DataTables with Material Design Bootstrap . Here is the snippet still showing the issue: https://mdbootstrap.com/snippets/jquery/jonathan-2/1084811?view=side#css-tab-view.

Any help will be greatly appreciated. Thanks.

kthorngren

Sounds like with this thread you are having problems styling the Datatables page length and search inputs. My suggestion would be to remove those using dom and create your own inputs.

You could do something like this for the search input:

      $('.my_filter input')
       .on('keyup', function() {
          $('#myTable').DataTable().search(this.value.trim(), false, true).draw();
       });    

And you can use the page.len() API to set the page length based on the input you create.

Kevin

hdusten

Hey,

Cam across this in a search. For what it's work I was attempting to apply a Select2.js plugin to my drop down and used jQuery to just chain the events.

$("select[name='" + t.id + "_length']").css({ 'min-width': '175px' }).select2();

I executed this snippet outside of the datatables runtime after the full dt object was returned to me.

May help - not sure.