Use bootstrap3 with datatables
Use bootstrap3 with datatables
Arden54
Posts: 39Questions: 4Answers: 0
Hi, I have to realise a project in symfony3. I use datatables and it works perfectly but the design isn't that good. That's why I would like to use bootstrap 3 for the each export buttons and each datatables I have in my web site. However, I can't use it.
I downloaded it with npm, I did :
- npm install datatables.net-bs
- npm install datatables.net-buttons-bs
And then in my file I added the two last lines of each script :
<script type="text/javascript" src="{{ asset('node_modules/datatables/media/js/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('node_modules/datatables.net-buttons/js/dataTables.buttons.js') }}"></script>
<script type="text/javascript" src="{{ asset('node_modules/datatables.net-buttons/js/buttons.colVis.js') }}"></script>
<script type="text/javascript" src="{{ asset('node_modules/datatables.net-buttons/js/buttons.flash.js') }}"></script>
<script type="text/javascript" src="{{ asset('node_modules/datatables.net-buttons/js/buttons.print.js') }}"></script>
<script type="text/javascript" src="{{ asset('node_modules/datatables.net-buttons/js/buttons.html5.js') }}"></script>
<script type="text/javascript" src="{{ asset('node_modules/datatables.net-bs/js/dataTables.bootstrap.js') }}"></script>
<script type="text/javascript" src="{{ asset('node_modules/datatables.net-buttons-bs/js/buttons.bootstrap.js') }}"></script>
and
<link rel="stylesheet" href="{{ asset('node_modules/datatables/media/css/jquery.dataTables.min.css') }}" type="text/css" />
<link rel="stylesheet" href="{{ asset('node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css') }}" type="text/css" />
<link rel="stylesheet" href="{{ asset('node_modules/datatables.net-buttons-bs/css/buttons.bootstrap.css') }}" type="text/css" />
<link rel="stylesheet" href="{{ asset('node_modules/datatables.net-bs/css/dataTables.bootstrap.css') }}" type="text/css" />
I still have the original datatables. Thanks for any advice to get bootstrap 3 on my datatables, I would like to avoid cdn because my chief doesn't like since the company got a proxy he thinks that the site can't access to the cdn and then print nothing. I think that I have already downloaded the extensions, just an implement problem maybe?
This question has an accepted answers - jump to answer
Answers
UP please ._.
Regardless of where you're sourcing datatables, do not load
jquery.dataTables.min.cssif you are loadingdataTables.bootstrap.css.I deleted the line
<link rel="stylesheet" href="{{ asset('node_modules/datatables/media/css/jquery.dataTables.min.css') }}" type="text/css" />
but now I haven't any css on my datatables and everything is dirty..
which script should I download first? And second question is that I got my repository datatables.net-buttons-bs and datatables.net-bs in my web repository in node_modules but not in my node_module from "project_name" ( because there is two differents node module that I can see, and other repository like datatables are in both).
According to the order of the load lines, the result isn't the same
However, I'm just seeing that I got others in the node_modules from project_name and not in the node from web.. damn I'm completely disappointed
Maybe this will help:
https://datatables.net/manual/styling/bootstrap
For CSS you will want to replace with jquery.dataTables.min.css dataTables.bootstrap.css and load it first.
You need to change your JS also. Replace jquery.dataTables.min.js with dataTables.bootstrap.js and have dataTables.bootstrap.js load first after loading jquery. Then replace dataTables.buttons.js with buttons.bootstrap.js and have it load before buttons.colVis.js, etc.
That will give you bootstrap 3 styling for both the table and buttons.
Kevin
Thanks for your answer, I modfied my lines like you said but this still doesn't work, I got this now :
css :
jquery :
js :
Maybe the problem come from my folder, because with the code above i got no datatables at all. In attachment there is my differents folders that are needed.
Sorry I miss typed this:
It should read like this:
For CSS you will want to replace jquery.dataTables.min.css with dataTables.bootstrap.css and load it first.
Not sure about your folder structure. Are you getting errors in your browsers console stating the CSS or JS files can't be loaded?
Kevin
Oh ok I understood for the css now, I got this :
css:
jquery:
js:
(And the buttons)
However it still doesn't work, even if I put "web/" in the asset. I got errors in my browser console, it says : http://localhost/projet/web/web/node_modules/datatables.net-bs/css/dataTables.bootstrap.css has not been charged because his type MIME, "text/html" isn't text/css.
SyntaxError: expected expression, got '<'[En savoir plus] dataTables.bootstrap.js:1
SyntaxError: expected expression, got '<'[En savoir plus] buttons.bootstrap.js:1
TypeError: DataTable is undefined[En savoir plus] buttons.colVis.js:40:1
TypeError: DataTable is undefined[En savoir plus] buttons.flash.js:1123:1
TypeError: DataTable is undefined[En savoir plus] buttons.print.js:82:1
TypeError: DataTable is undefined[En savoir plus] buttons.html5.js:224:1
Propriété « -moz-osx-font-smoothing » inconnue. Déclaration abandonnée. pharmacie:96:1114
http://localhost/projet/web/app_dev.php/pharmacie:53:13
j@http://localhost/projet/web/node_modules/jquery/dist/jquery.min.js:2:29997
http://localhost/projet/web/node_modules/jquery/dist/jquery.min.js:2:30313
undefined jquery.min.js:2:31569
TypeError: $(...).DataTable is not a function[En savoir plus] pharmacie:53:13
Do you see the CSS source if you just load that directly in your browser?
Sounds like the server isn't sending that as text/css.
Allan
No I don't, the browser says : this website is inaccessible when I try this url :
http://localhost/projet/web/web/node_modules/datatables.net-bs/css/dataTables.bootstrap.css
I'm not familiar with symphony but I think project/web is the root of the website. Your URL may need to look more like this:
http://localhost/node_modules/datatables.net-bs/css/dataTables.bootstrap.cssAlso if you need to add a port to the URL when browsing the web pages then you may need to do the same to load the CSS and JS, for example:
http://localhost:8000/node_modules/datatables.net-bs/css/dataTables.bootstrap.cssI'm not sure, just speculating on what the issue may be. If this doesn't work then you will need to look into the configuration of your website to find the appropriate paths.
Kevin
Thanks for answer, in fact I tried this URL in another browser : http://localhost/projet/web/node_modules/datatables.net-bs/css/dataTables.bootstrap.css
and it works ! I mean I can see the css data who start with : table.dataTable {
clear: both;
margin-top: 6px !important;
So now I know that I have to use this path in my asset to expect to get something...
I remember now why firstly it didn't work it was because I put this URL on firefox and here the company put a proxy who block everything but not in IE (that's why in IE it worked).
However, even with this line in my asset I can't print the bootstrap ._.
Can you provide more details of the current config and what is happening?
Kevin
for the css I have this:
for the jquery I use this :
"
"
and for javascript:
"
"
In mywebsite I got nothing excepted the column names from the datatables. Also I got in my debug console those error lines :
dataTables.bootstrap.js:1 Uncaught SyntaxError: Unexpected token <
buttons.bootstrap.js:1 Uncaught SyntaxError: Unexpected token <
buttons.colVis.js:40 Uncaught TypeError: Cannot read property 'ext' of undefined
at buttons.colVis.js:40
at buttons.colVis.js:33
at buttons.colVis.js:35
buttons.flash.js:1123 Uncaught TypeError: Cannot read property 'Buttons' of undefined
at buttons.flash.js:1123
at buttons.flash.js:36
at buttons.flash.js:38
buttons.print.js:82 Uncaught TypeError: Cannot read property 'ext' of undefined
at buttons.print.js:82
at buttons.print.js:33
at buttons.print.js:35
buttons.html5.js:224 Uncaught TypeError: Cannot set property 'fileSave' of undefined
at buttons.html5.js:224
at buttons.html5.js:36
at buttons.html5.js:38
jquery.min.js:2 jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (http://localhost/projet/web/app_dev.php/pharmacie/1000002:59:27)
at j (http://localhost/projet/web/node_modules/jquery/dist/jquery.min.js:2:29999)
at k (http://localhost/projet/web/node_modules/jquery/dist/jquery.min.js:2:30313) undefined
r.Deferred.exceptionHook @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: $(...).DataTable is not a function
at HTMLDocument.<anonymous> (1000002:59)
at j (jquery.min.js:2)
at k (jquery.min.js:2)
Edit my other script lines for jquery and js can't be print here ? I copy paste them and they looks like invisible
You need to use the tick marks as described below the
Post Commentbutton to format code correctly:Kevin
Oh exactly, ty ! So I can explain clairly ( I hope) the problem. in my script I got those lines to expect to have bootstrap on my datatables !
For my css I got this :
For the jquery I have:
And for the javascript I have this :
With this code to get bootstrap in my website I have now nothing, excepted the column names who come from the html page.
In my debug console I got different error lines like :
Or this in another browser :
By the way I'm not english or american and english isn't my mother tongue so sorry for my vocabulary.
No problem regarding your english
You are missing the buttons CSS
buttons.bootstrap.min.css. Also are you loading Bootstrap (bootstrap.cssandbootstrap.js) itself?Kevin
I added this line for the buttons css :
Hmm no, all I have is in my last message and more this line above. Should I loading Bootstrap (bootstrap.css and bootstrap.js) itself?
Yes, you need to load the Bootstrap library (bootstrap.css and bootstrap.js). Sorry, I think I'm confusing you (and myself) with all the responses. You can look at this example for a basic Datatables with Bootstrap config. Make sure to look at the CSS tab also. Basically you need the following in this order:
CSS
JS
I think that should get you going with Bootstrap styling.
Kevin
Hi, thanks for answer.
I followed what you said and I did like you proposed. However, I don't know and I never seen those files : bootstrap.css and boostrap.js. I've looked in each folder in my both node_modules and I haven't those files. Should I download something more?
I have already in my node_modules as folder:
datatables
datatables.net
datatables.net-bs
datatables.net-buttons
datatables.net-buttons-bs
datatables.net-buttons-dt
You'll find the files here (in the media folder):
https://datatables.net/download/packages
I am also using bootstrap3 but I am using the download builder provided here:
https://datatables.net/download/index
Never had any problem getting it running. Maybe worth a try? I select "Bootstrap" for "Styling" but then I select "No styling library" because I already have Bootstrap 3 on my system. This works because Data Tables will still include the required files "dataTables.bootstrap.css" and "dataTables.bootstrap.js" automatically.
Hi rf1234, I don't know if I have to download this files because I already did "npm install datatables.net-bs" and "npm install datatables.net-buttons-bs" so I think that I already have bootstrap 3 on my project no ?
The real problem is to get the right scripts to include the required files to work with bootstrap3.
Well I only wanted to answer you question where those files are ... if you can't find them on your system something is probably wrong ... Data Tables won't run with bootstrap if it doesn't have access to those files ... (or if they aren't included in the single file if you are using single js and css files such as "datatables.css" and "datatables.js" or the respective minified versions).
I did some modifications and now I got more than only the column names. I have the right ajax call and it returns the good values. However, something is still missing because the bootstrap css isn't present and it looks like a bit dirty. In attachment my actual datatables.
looks broken ... sorry, but I can't be of more help here I guess.
Maybe you start over with the installation process? Probably better then trying too many fixes ?!
Can I have a look at your script who permit to use bootstrap on datatables please? Thus I will see my pb.
I use the download builder (see above), not npm! I am not sure whether this will help you at all. So this is my last attempt. Sorry.
I already have bootstrap on my system:
Since I chose the option "single file" in the download builder this is it for Datatables:
if you make the proper selections in the download builder: That's all you need to do
Looks like the page is not completely loading. Typically this is due to an error. Look at your browsers console for errors.
Kevin
Ok thanks rf1234, I will see what I'm doing.
Indeed Kevin, I got now only one error in my browser console, it is :
La feuille de style http://localhost/projet/web/node_modules/datatables.net-bs/css/bootstrap.css n’a pas été chargée car son type MIME, « text/html », n’est pas « text/css ».
In english, it means that http://localhost/projet/web/node_modules/datatables.net-bs/css/bootstrap.css didn't load (so it isn't applicated on the site) because his type MIME (-> the text/html) isn't in text/css.
I've tried to find an answer on the internet and they say that I have to add something like header("Content-type: text/css"); but I'm not sure at all...
Edit, the browser says that the type isn't text/css but my script is :
there is the type = "text/css"
I believe you had this error before and Allan asked if you were able to load the CSS directly in your browser. Are you able to do that?
Here is an example I created previously to try out Bootstrap tabs. You can ignore the
bootstrap-theme.min.cssas its not necessary.http://live.datatables.net/xidolayi/1/edit
Kevin
Yes I know. No I'm not able actually to load the CSS in my page.
I watched, but my chief doesn't want me to use the CDN