Problems with bootstrap search box (not displaying class correctly)
Problems with bootstrap search box (not displaying class correctly)
bsuk
Posts: 92Questions: 26Answers: 2
Hi, I've downloaded this bootstrap template which contains a datatables example:
http://startbootstrap.com/sb-admin-v2
However, as soon as I modify the tables.html page to reference my mysql database via the PHP server processing page included with datatables, the datatables search box loses it's "form-control" class, i.e doesn't have the bootstrap style blue shadow around it..
What could it be about the server processing page that causes this to happen?
It's driving me crazy as I can't find any reference to the "form-control" or way of seeing how the search box should obtain it's correct class.. I can't provide an example unfortunately as the page is internally hosted.
Any idea where to look to enforce this class?
Out of the box, bootstrap and datatables display the search box correctly, but as soon as I make this modification, the search box defaults back to a standard html box with no blue border :(
This question has accepted answers - jump to:
Answers
Is the admin template using DataTables 1.10 and the latest Bootstrap integration files for DataTables? If not, that is where I would suggest starting (or possibly asking the template authors).
Allan
Hi Allan, thanks for responding. It turns out that the template in fact uses 1.10-dev version.
However, on upgrading the files to the 1.10 latest release of DataTables, the problem is still there. Furthermore, searching is noticeably slower.
\When typing into the search field with 1.10-dev, the browser almost instantly displays the results. When working with 1.10 final however, there is a delay of around a second before the results are displayed.
As per the original problem, is there a way of forcing the styling of the search box?
If so, whereabouts in the .js or .css file should I look to do this?
Many thanks again for your time. I'll be looking to purchase the DT support soon as there are many more projects where I will require this excellent plugin.
Hi,
Are you able to link me to the page so I can take a look and see what the issue is with the filtering speed?
Also, with the Bootstrap styling, did you also update to the latest Bootstrap integration files?
Allan
Thanks Allan, I did download and replace the latest bootstrap integration files as per the links on this site.
Whilst the server is internal, I've recreated everything in a new test environment on a publicly available website for your perusal. I've managed to recreate the problem.
Link 1 (non-MySQL based) "out of the box" page where bootstrap styling works, and searching is almost instantaneous:
http://benshaw.org.uk/test-1-10-final/tables_orig.html
Link 2 (MySQL DB using server_processing.php) linking to DB with only three columns, incorrect styling on search box, and 1 second delay on searching:
http://benshaw.org.uk/test-1-10-final/tables.html
For the record, I'm sure the slowness isn't related to the additional server processing of doing the DB lookups, as I can get this working instantly (like in Link 1), with the same "snappiness" without using the Bootstrap theme (with out of the box DataTables).
The delay on the filtering - you are using server-side processing, so a request is being made to the server for every filter, page, sort etc. In 1.10 DataTables has a rate throttle so you don't DDoS your own server when using server-side processing by sending an Ajax request with every keystroke.
Currently that is not customisable - although you can call
search()using an event handler if you want to bypass it.I would point out that server-side processing is only really designed for 10'000+ records. Using it for less is a performance hit, since the browser could have performed the operation in the amount of time it takes to get the data from the server.
For the filtering class issue, you have
"bJQueryUI": true,in the code. That is applying the jQuery UI classes to the document, overwriting the assigned Bootstrap ones. I'd suggest just removing that option unless you actually do what jQuery UI styling rather than Bootstrap.Allan
Many thanks Allan, the bJQueryUI changing to false certainly fixed the bootstrap styling issue. (I was convinced I'd tried that already, but obviously whilst trying different troubleshooting steps I somehow did it wrong!)
In regards to not using server side processing, I didn't realise it was possible to do mySQL based tables without using this..?! I'll have to check the documentation in more detail to see how to get this working with Ajax/client side only instead.
However, I'd be happy with the potential DDoSing as the site will only be accessed by a small number of people so shouldn't cause an issue on the server. I'm not quite sure I understand your "search() DT event handler" workaround (apologies, I'm a beginner to Jquery and web development in general), however, hopefully the client side processing solution will get around this if it's still possible to do MySQL searches this way.
Once again, a big thanks for taking the time to help.
"Currently that is not customisable - although you can call search() DT using an event handler if you want to bypass it."
Allan, I'd hugely appreciate it if you could elaborate on this a little, or point me in the direction of some documentation regarding this.
I'd love to get the speed of DT 1.9 with server side processing but would prefer not to downgrade if possible! Many thanks!
This line of code here: https://github.com/DataTables/DataTables/blob/master/media/js/jquery.dataTables.js#L2704 . Change the 400 to be smaller if you want it to respond faster than every 400mS.
Might be worth reading over the processing modes description in the manual as well to see if you really need server-side processing.
Allan
Awesome! Exactly what I was looking for, thanks so much!