Browserify DataTables

Question

I tried following the instructions at NPM packages - DataTables but I still can't get it to bundle with Browserify.

Here is my minimal, complete, and verifiable example:

app.js

'use strict'

var $ = require('jquery')
var dt = require('datatables.net-dt')()

$(document.getElementById('table')).DataTable()

Output of npm list

[email protected] /home/RinkAttendant6/www/foo
├─┬ [email protected]
│ └── [email protected]
└── [email protected]

Output of browserify app.js -o bundle.js

Error: Cannot find module 'datatables.net-dt' from '/home/RinkAttendant6/www/foo'
    at /usr/lib/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
    at process (/usr/lib/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
    at ondir (/usr/lib/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
    at load (/usr/lib/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
    at onex (/usr/lib/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
    at /usr/lib/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:82:15)

What am I doing wrong?

Answer 1

According to the package vendor, the datatables.net package should be used instead of datatables.net-dt unless Bootstrap or Foundation is used.

Refer to https://github.com/DataTables/DataTables/issues/434#issuecomment-161278064

Instead use:

var dt = require('datatables.net')()

The reason for this is that the datatables.net-dt package does not contain a Javascript file - it doesn't need one - it contains only CSS (it should actually contain a couple of images as well, that will be corrected in 1.10.11).

No Javascript file is required there since the DataTables defaults are suitable for DataTables styling. The same is not the case for Bootstrap, etc.

Answer 2

Using another recommendation within that github issue thread worked for me.

See: https://github.com/DataTables/DataTables/issues/434#issuecomment-113286718

var DataTable = require('datatables.net')()

$.fn.DataTable = DataTable

That code worked with or without a browserify-shim entry for datatables.