Module jQuery DataTables, ModuleJS

[Soma]

jQuery DataTables 1.9.4

This module adds the great jQuery DataTables plugin for use in ProcessWire. You can load the module in the admin from any of your module using:

$this->modules->JqueryDataTables;

This will load the module and add CSS and Javascript from DataTables. This mostly would be used by a custom admin Process module.

Note: Loading this module will just attach the necessary files to the admin. To use it you would need to add your own jQuery scripts and init the DataTables with something like.

$("#mytable").dataTable(settings);

For more informations on the DataTables options and API refer to http://datatables.net/

Download:

http://modules.processwire.com/modules/jquery-data-tables/

https://github.com/somatonic/JqueryDataTables

I included only the necessary files, and removed examples and docs from the package.

NOTE:

To avoid confusion, THIS module has nothing to do with my ProcessDataTable module for ProcessWire!

ProcessDataTable was a proof of concept integrating it in a admin page. It included the jQuery DataTables plugin, but unfortunately it may wasn't a good way to.

 

JqueryDataTables is a special js module like Fancybox. It is a "integration" of the jquery plugin for developers to use datatables in their modules. It won't be loaded unless you do so. An example would be the ModulesManager. 

 

They can coexist if you will.

[kongondo]

Thanks Soma!

What about your other module?: http://processwire.com/talk/topic/704-datatable/

[Soma]

That was just a proof of concept back then that included the datatables plugin which doesn't allow other modules to use it.

This now is a plugin integration so everybody can use it without including datatables on their own.

[Martijn Geerts]

Cool, combined with Repeater Table you can setup a nice ordered table within 5 minutes

[Soma]

Cool, combined with Repeater Table you can setup a nice ordered table within 5 minutes

That's actually cool! Even more if you would give me a like!

[Martijn Geerts]

2 more

[diogo]

and even more 2

[renobird]

Soma,

Thanks for sharing this — I just updated 3 in-house "dataTable" modules to use this module instead of their local copies. So much easier to maintain.

Also, the ProcessDataTable module has been an excellent boilerplate for building custom admin pages. So, thanks for that too.

[renobird]

Stubbed my toe using this in a module that was autoloading it's CSS/JS.

My modules CSS/JS were being loaded before the DataTables CSS/JS.

So, I went with the method in the DataTables module, and just added them manually in the order I needed.

// load the dataTables module — loads the module and all the required JS/CSS
$this->modules->JqueryDataTables;

// add module CSS/JS
$this->config->styles->append($this->config->urls->ProcessNewsManager . "NewsManager.css");
$this->config->scripts->append($this->config->urls->ProcessNewsManager . "NewsManager.js");

Anyhow know if there is a way to call $this->modules->JqueryDataTables somewhere else in the module that would cause it to load before the modules CSS/JS?

See Below.

[Soma]

What module? Can you provide a little more details where and how you load them.

[renobird]

It's a custom module — a variant of your DataTables module.

The above is the first code in ___execute().

[Soma]

Mhhhh, so a ProcessModule? But it's no autoload I guess. Can you show code, first methods init() execute() etc when you experience the wrong order?

[Soma]

Just add your code you have posted to the init in that order. All ok. No?

And remove a parent::init() in the init if there.

[renobird]

Hi Soma,

Sorry if my post wasn't clear. The above works fine.

The problem is if I let my custom module autoload it's CSS/JS (by naming it the same as the module).

In that case, not matter where I put:

$this->modules->JqueryDataTables  

it loads after the modules CSS/JS — which as you know is a problem for dataTables.

EDIT: I don't think there is any issue with either of your modules, more just mentioning this incase anyone else runs into this issue.

[Soma]

Ok I installed both and tried. It works fine I have put that in init and no loading in execute.

public function init() {
    $this->modules->JqueryDataTables;
    parent::init();
}
 

And renamed the DataTable.js to ProcessDataTable.js.

[renobird]

*slaps forehead*

OK, so I'm going to blame this one on having a newborn at home.

I had tried adding it to init(), but I added it AFTER parent::init()

So of course it was going to load after the modules CSS/JS.

Works great!

Thanks for the assistance, apologies for the wild goose chase.

[Soma]

NO problem renobird! Yes the parent::init() loads the scripts/styles. So also nothing wrong with doing it manually in your init as alternative. But thanks for bringing this up for sure!

[kongondo]

Soma, will you be updating to 1.10. any time soon? I know it is in beta and may break some things but there are some very nice changes. I also like their new website btw.

[Soma]

Damn. Already an update?

[Beluga]

Some new goodies:

http://datatables.net/blog/2015-08-13

Styling is also key, with DataTables and all of its extensions now fully supporting four styling frameworks (more are planned):

    DataTables' own styling
    Bootstrap
    Foundation
    jQuery UI