Jump to content

jQuery DataTables, ModuleJS


Soma
 Share

Recommended Posts

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.

  • Like 13
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

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. :)

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

*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.

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...