does Jquery Datatable with Bootstrap 3 Style can be loaded using Requirejs?

ktwmaggi

I have been using this Jquery Datatable with Bootstrap style, It just work perfectly. Now we are exploring requirejs to load all JS file. We tried loading Jquery Datatable through Requirejs with Default style, which also works perfectly. However Jquery Datatable with Bootstrap is not working, issue i have is table is rendered without border, font size are very small. so far, I didn't try require-css(which i see in many post), though I really don't understand what require-css is going to do here (I may be wrong, but many post I saw with require-css are just hanging without any solution). So first thing, I want to check is, whether this Jquery Datatable with Bootstrap 3 Style can be loaded using Requirejs and does it work or not?

Note: everything we are using is latest version. And I'm only using core Datatable, not any extension.

allan

Bootstrap compatibility for DataTables requires the following:

• bootstrap.css
• jquery.dataTables.js
• dataTables.bootstrap.js
• dataTables.bootstrap.css

The first two are fairly easy to load with RequireJS - the last one is not. How are you including the CSS for your other modules (if you have any)? There is the require-css plug-in for RequireJS that you mention, but it isn't as intuitive as I would like. Indeed, in general I find CSS and package managers to be a bit of a pain point!

Allan

ktwmaggi

I tried with require-css. here is how, I loaded CSS files (but still same problem, I'm not sure what I'm doing wrong here). I also have sample gitHub project for this - https://github.com/karthiktkk/ExploreRequirejs (It has got all working files)

requirejs.config({
shim: { 'bs-js': { deps: ['jquery']}},
deps: [ 'require-css' ],
paths:{
'require-css': 'lib/css.min',
'bootstrap': '../css/lib/bootstrap.min',
'datatables-css': '../css/lib/dataTables.bootstrap.min',
jquery: 'lib/jquery-2.2.3',
'bs-js': 'lib/bootstrap',
'datatables.net':'lib/jquery.dataTables.min',
'datatables-bs': 'lib/dataTables.bootstrap.min',
}
});

ktwmaggi

So now, we knew that loading depended css file through requirejs is issue. How about other module dependency API like Webpack? does all depended css file will be loaded smoothly, if we use Webpack?

allan

It should yes - I've heard from people using WebPack with DataTables before.

This is part of the issue with module loading, they generally focus on Javascript. I'm going to experiment with npm-css later on and various other package managers.

Allan