Problem installing Datatables with NPM and Browserify

Problem installing Datatables with NPM and Browserify

htwyfordhtwyford Posts: 23Questions: 9Answers: 1
edited May 2017 in Free community support

I'm fairly new to using NPM, so this is probably some obvious NPM mistake!

I've installed DataTables and the extensions I require via NPM. My package.json:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "browserify-css": "^0.10.1"
  },
  "dependencies": {
    "bootstrap-material-design": "^0.5.10",
    "datatables.net": "^1.10.15",
    "datatables.net-bs": "^1.10.15",
    "datatables.net-buttons": "^1.3.1",
    "datatables.net-buttons-bs": "^1.3.1",
    "datatables.net-keytable": "^2.2.1",
    "datatables.net-keytable-bs": "^2.2.1",
    "datatables.net-rowgroup": "^1.0.0",
    "datatables.net-rowgroup-bs": "^1.0.0",
    "jquery": "^3.2.1"
  }
}

I'm trying to bundle everything together with Browserify. My main.js, to be bundled into bundle.js:

var mdb = require('bootstrap-material-design');
var dt = require('datatables.net-bs')();
var buttons = require('datatables.net-buttons-bs')();
var buttons5 = require('datatables.net-buttons/js/buttons.html5.js')(); // HTML 5 file export
var buttonPrint = require('datatables.net-buttons/js/buttons.print.js')(); // Print view button
var keyTable = require('datatables.net-keytable')();
var rowGroup = require('datatables.net-rowgroup')();

I have jQuery on the page separately, before bundle.js. The Bootstrap Material Design JS is loading fine, so I know there's no issue with the way I've added bundle.js to the page.
Finally, I've added all the CSS files in a main.css, which I've included on the page before bundle.js:

@import url(../node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.css);
@import url(../node_modules/bootstrap-material-design/dist/css/ripples.css);
@import url(../node_modules/datatables.net-bs/css/dataTables.bootstrap.css);
@import url(../node_modules/datatables.net-buttons-bs/css/buttons.bootstrap.css);
@import url(../node_modules/datatables.net-keytable-bs/css/keyTable.bootstrap.css);
@import url(../node_modules/datatables.net-rowgroup-bs/css/rowGroup.bootstrap.css);
@import url(Site.css);
body {
}

Again, the Bootstrap MD stuff is loading fine, so there's no inherent issue with main.css itself.
According to the debug bookmarklet, dataTables is not present on my pages. I of course have the script on the page that initializes DataTables. I feel like it has something to do with the way I'm bundling CSS, but I'm not sure. Any help is appreciated!

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Answer ✓

    The CSS shouldn't really effect the JS at all. The debug bookmarklet only operates on the JS - it doesn't look at the CSS at all.

    I don't immediately see any issues with the above - are there any errors or anything reported? Can you link to the page so I can take a look at the built files?

    Allan

This discussion has been closed.