Module DataTable

[Soma]

ProcessWire DataTable 1.0.0 (https://github.com/somatonic/DataTable)

This module enables you to find and edit (fancybox modal iframe) pages at a small and very large scale.

So far it has:

• ajax suuport
  
• masked pagination
  
• state saving (datatable using cookie, template filter using session)
  
• template filter (only showing templates user has edit access)
  
• search text filter (using title|body field)
  
• multilanguage support (PW's language translator)
  

Superuser will see all pages and system templates. Users only those with view|edit access and pages in trash.

This Module is still very simple and only in "lazy" developement and testing and this is the first official release mainly to get it out for others to see and use. It also could provide as an example/kickstart for someone. Everyone is encouraged to help and contribute to further improve or add features. The module is hosted on my github account: https://github.com/somatonic/DataTable

The plugin used in this module is the excellent jQuery Plugin DataTable 1.8.2 - http://datatables.net/

I've chosen it, because I used in in some other web projects and was really happy about it's power and ease to setup. It supports jQuery UI styling, which makes the deal perfect for a ProcessWire module.

Thanks and have fun trying it out.

------

(original post, kept for nostalgic moments)

Ok, I started trying to implement the great jQuery dataTables plugin into ProcessWire.

So far it works very well and is very powerful and fun. Best of it it support jquery themeroller.

Not sure how far this all can go with configuration and how to define which pages should be displayed, what collumns etc...

Many many things to consider. But if it could provide as an example on how to implement it, it would be great tool for site builders.

Here you can see a short video of how it looks and works.

[apeisa]

Soma, looks very nice! You are on fire dude

You implemented it with ajax pagination already?

[Soma]

Yeah, it's fully ajax. Pagination, filtering, sorting... and it saves state, so if you come back it's on the same spot.

It's very cool and fast. I see this as a great alternative to the page tree, when dealing with large lists of products.

[apeisa]

Great stuff. Yeah, I have used DataTables many times in the past and always loved that. Very solid software.

EDIT: Will test this soon also. Hopely tomorrow!

[Soma]

Great stuff. Yeah, I have used DataTables many times in the past and always loved that. Very solid software.

EDIT: Will test this soon also. Hopely tomorrow!

Yeah I used it in some projects too. It has many great features that can be used and the API is great.

Since I knew already how it works, It took me only a few hours to get it fully working, combined with PW's selector API it's as easy as pie, though has some pitfalls, someone not so experienced will have hard time.

Tell if you want my current version as a starting point. But it's very rough code still.

[apeisa]

Oh, I didn't realize there wasn't download link nor github link. I'll wait for official release

[ryan]

Soma this is awesome! Thanks for posting the video. Antti's right–you are on fire! I can't wait to give this a try.

[Soma]

I just pushed a first version for testing to github. See first post for Infos.

Edit: While at it. Ryan, I can't deinstall the module, the deinstall field is disabled to open on the module page. Why is that? How would it be possible to get it to work?

[ryan]

Great work Soma, it looks and works great! A great alternate way to navigate pages in the admin. Just tested here and it works great.

Edit: While at it. Ryan, I can't deinstall the module, the deinstall field is disabled to open on the module page. Why is that? How would it be possible to get it to work?

Javascript error, ProcessDataTable.js line 26.

[Soma]

Javascript error, ProcessDataTable.js line 26.

Thanks Ryan, it was autoloading the js on module page even though it shouldn't (?). SInce the module isn't loaded there's missing config it would spit out. I renamed the js and load it explicitly on init to avoid this problem.

[ryan]

Soma, you are right it shouldn't be autoloading that JS, given that the module is not an autoload one. Turns out that the $modules->isUninstallable($class) was inadvertently init'ing the class when it did its check, so it was causing the modules init() function to be called when viewing its config screen. Just fixed this in latest commit.

Thanks,

Ryan

[Rob]

I'm trying to use this module as a starting point for my own DataTable-based module, but I'm running into a few problems.

I've basically copied the entire code into a new folder so I can rename the class, JS file etc try to return some static JSON in my new executeGetData() method, but when my new page first loads the function is never being called. That is to say that the AJAX request isn't being made.

I'm no JS expert so I can't work out if there's some place where the initial request is being made from within the JS code in DataTable.js.

Ultimately my question is this: -

When I first load the DataTable page, from where does the very first AJAX request get called that turns the plain HTML table into the DataTable? I have the duplicated JS and CSS classes in the same folders underneath my module folder and I have checked (with Firebug) that all files are being loaded correctly, so I'm now at a brick wall!!

Thanks in advance.

[Soma]

The DataTable.js contains the initialize script. There's an option "sAjaxSource": "getdata", which defines the ajax url. This is called automaticly by DataTable plugin when page is loaded.

But I can't see why it wouldn't work, even if you renamed the module it should still work. It just calls "/page-you-are-on/getdata".

I wonder if you're using this on frontend or in admin?

Edit: Or have you renamed the table class?

It is initialized in DataTable.js using

var datatable = $('.dataTable').dataTable({ ...});

So if you renamed the class on the empty table output you need to rename it here too.

[Rob]

Thanks Soma.

I suspected that the init script was being run by the core DataTable code but I didn't check to be honest.

I haven't changed the table class or anything else really. I have changed module-related data such as name but I haven't fiddled the JS code. I've even run diffs on my code vs yours to try to find anything glaring but nothing jumps out at me.

Very strange!

[Soma]

Are you trying to use it on frontend or is it still in the admin?

[Rob]

It's in the admin.

I'm now diffing my files with yours again to see the differences and work out if there's something vital going on that I've missed.

[Soma]

I assume that my module is working out of the box? Just to make sure.

[Rob]

Yep your module works fine as far as I can tell.

[Soma]

Hmm, make sure everything is loaded. And check if there's any js error's or any ajax request's being made. Or try to put alert("hello"); at certain points in the /DataTable/DataTable.js to see if it gets there. If you can't figure it out send me your files and I'll work it out.

[Rob]

Somehow I'd ended up with this line...

$this->config->js($this->className(), $lang);

...BEFORE I'd set up the $lang array. I moved it after and it's rendering the table now.

Next up....set up the AJAX handler method to work properly.

Thanks for trying to help!

[Rob]

Hi again Soma.

Did you ever experience any problems with caching? I have a strange issue where my getdata() method returns new data if I use the pagination links but does not if I use the headers to change the sort column or direction.

I thought it might be client-side cache but it seems unlikely if it works with some requests and not others. I have compared the request vars going to the server with your datatable code and I haven't spotted any extra fields or otherwise different behaviour.

The AJAX request is definitely being made and the request params are changing with the different heading clicks, but the returned data doesn't change unless I use the pagination links.

[Soma]

It's hard to tell from here. There's a request being made but no data returned in the response?

I think you need to make sure the fiel(cols) you make sortable can really be sorted using PW fields. Also it can be really hard to find problems, since only 1 little thing wrong and the whole breaks.

What I did often was to output some debug info in getdata function (print_r or echo vars). If you inspect the returned data by the ajax request, you'll be able to see it or spot errors.

One thing there's still left in the code (commented) is

echo $selector;
exit();

This will let you see the PW selector generated, make sure it is correct.

[horst]

Hi Soma,

can this be used in the frontend?

I want to use DataTables with my MP3-DB in the frontend with AJAX-Pagination and -Sorting.

[Soma]

I haven't tried and I don't thin it would work just out of the box, but it would be easy to adapt it to use in front-end. You only need the js script to be added and run the execute like

$dt = $modules->get("DatTable");
echo $dt->execute();

[horst]

I haven't tried and I don't thin it would work just out of the box, but it would be easy to adapt it to use in front-end. You only need the js script to be added and run the execute like

$dt = $modules->get("DatTable");
echo $dt->execute();

thank you for the info. I will try it out.