How can I access/edit the 'Show entry' dropdown select?

dataphpmysql

Hello everyone,

I'm currently not able to see the dropdown of the 'show entries' select section.

I'm using Material Design for Bootstrap 4, and in that framework the regular 'select' is not visible unless is initialized first. However, even with the initialization it doesn't work. I think is because I need to add a class to it.

However, in order for me to add said class or simply replace the default 'select' into the 'material design select' version that works well with the framework I'm using, I need to access the default code for the 'Show entry' select.

How can I do this? This is hard cause the 'select show entries', the 'search', the 'displaying ...', and the pagination automatically appears around the table and makes it very hard for us to be able to access and edit it. So any information on how to do so will be greatly appreciated.

Thanks!

kthorngren

Not really sure about Material Design for Bootstrap 4 but wondering if you need to add the l option to the dom option.

Kevin

dataphpmysql

Hello, I tried that which I think it goes like this:

$('#example').dataTable( {
"dom": 'lrtip'
} );

But it still doesn't work. Any other suggestions?

kthorngren

I'm haven't used Material Design but Datatables does have styling components for it:
https://datatables.net/examples/styling/material.html

I took the basic MD and BS4 files here:
https://mdbootstrap.com/md-bootstrap-cdn/

Made an example that seems to work:
http://live.datatables.net/zayenije/1/edit

Its using the Datatables Material Design styling. You could change to Bootstrap 4 styling by changing the word material to bootstrap4 for the dataTables.material.min.css and dataTables.material.min.js include files.

Maybe you can build an example showing your issue or provide a link to your page?

Kevin

dataphpmysql

The difference is that I'm not using the CDN version of Material Design, I'm using the one you have to download with files which is this one: https://mdbootstrap.com/getting-started/

Reason is that I'm using the "pro" version, so I need to use that one and not the CDN one. So for example if you replace the following (plus all the JS ones too):

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/css/mdb.min.css" rel="stylesheet">

With the ones that appear on the file that you download, it makes the dropdown of select not work.

Which brings me back to my original question on how can I access the code of the <select> dropdown of the 'show entries' section? Is there any way of doing that at all? If I can do it then I can just replace the default one with the one Materal Design uses and it'll probably work.

kthorngren

I guess you are referring to this page?
https://mdbootstrap.com/javascript/material-select/

Maybe you can add the class and initialize material-select within the initComplete function. Something like this example:
http://live.datatables.net/wetofiwa/1/edit

I don't have material-select but so I'm guessing this would work. In the jQuery select it uses name="example_length". Replace example with the ID of your table.

Kevin

dataphpmysql

Thanks for your help!! that was actually a great idea, and I was able to use the logic of your code to make it work.

Turns out that there looks to be a bug with the MDB <select> code, here's the page: https://mdbootstrap.com/legacy/jquery/4.4.5/?page=javascript/material-select . As you can see, the examples of the <selects> aren't even visible. I'll have to contact them to see if they fix it. However, at the end of the page, there's a default select with the class "browser-default" which does work in that page. So I used your code and replaced the class 'mdb-select' with 'browser-default' and it finally works!

Thanks so much for your help