DataTables on custom plugin page

JJSagan

Hi All,

I have created a custom page and all works very nicely.
Next I had to display a table.

DataTables have some nifty features, and I ended up downloading from: https://datatables.net/download/

As for the setup, I tried the following options (so as to avoid reloading JQuery / Bootstrap):
UI: datatables
Package: datatables,

and:
UI: jQuery UI
Package: datatables,

I followed https://community.nodebb.org/topic/734/loading-external-scripts-with-requirejs/5. In addition, I added define.amd=0 above datatable's js to escape:

 (function( factory ) {

    "use strict";  if ( typeof define === 'function' && define.amd ) {
    // AMD
    define( ['jquery'], function ( $ ) {
        return factory( $, window, document );
    } );
}

My client's plugin code is as follows:

define('forum/client/plugins/myfile', ['translator', 'benchpress', 'moment'], function (translator, Benchpress) {

    var myDataTables= {};   myDataTables.init = function () {
    jQuery('document').ready(function() {
        requirejs(['plugins/nodebb-plugin-myplugin/static/lib/datatables.js'], function (dataTable) { my code...

The table loads up, and looks nice and cool.

The problem follows: when I attempt to browse back into the forum (from the custom page), pages won't load up. The server does gets a request, but the client just does not display anything.

By the way, I tried loading DataTable's JS by including it in the project's json file (removing the requiredjs), with no luck.

I know I screwed up somewhere, just can't figure this one out.
Any help will be highly appreciated!
JJ

PitaJ

Setting define.amd will make it so every script after yours will break. You should load datatables via requirejs instead by adding it to modules in plugin.json

JJSagan

@PitaJ , Thank you!

So you mean adding it as follows:

"scripts": [
"static/lib/datatables.js"

If so I tried that. Without altering the file, removing the AMD related if, it won't load.

Once I remove the "if amd", deleting it this time, the table works, but other pages have issue loading...

Any idea?

PitaJ

@jjsagan no, look at some other plugin.json files. There's a modules object in addition to a scripts array. It works fine with anonymously defined scripts.

JJSagan

Done. Had to deal with the .AMD again, but that was simple.
Thank you so much! you guys are amazing!

PitaJ

@jjsagan you don't have to deal with .amd if you use modules

JJSagan

@pitaj, it did not work otherwise... Maybe it has something to do with datatables file...

PitaJ

@jjsagan it's literally the whole purpose of that field in plugin.json, but you have to use it like this:

require(['datatables'], function (datatables) { ... });

PitaJ

This thread might be of help as well: https://community.nodebb.org/topic/11731/how-to-include-the-images-that-are-referred-from-inside-a-third-party-css/14

alfazaz

@JJSagan I also try to use datatable in a plugin to display a table on a custom page but without success. I have my html table but datatable doesn't play on it... Do you remember steps to make it works ? Thanks !

alfazaz

No matters... I changed my mind. I will not use datatables and stay with bootstrap tables.

JJSagan

@alfazaz
Yes,
Create a module, say dt.js.
Paste the datatables code into said file.
That module will be compiled with nodebb, and then you can just require the module in the client.
If you need help let me know.

alfazaz

@JJSagan Thanks for your answer. I tried it but it was making things bad on reloading the page or loading other pages. I will not use datatables (and it will be easier for me on future updates).