CiviCRM Community Forums (archive)

This one's got me stumped. 

CiviCRM uses the jQuery DataTables plugin to handle on-page table sorting.  Works wonderfully, really.

I have a couple of cases where I need my JS code to interact with that DataTables functionality.  In once case I'm dynamically adding data obtained via AJAX calls.  In another I need to modify the sorting behavior, and fire some code before and after the sort is performed. 

This is all possible with the DataTables API, as long as you have access to the object that's returned from the DataTables initialization call.  In the template that provides this functionality (templates/CRM/common/jsortable.tpl), that call is made inside of cj(document).ready(), and the return value is not stored outside of that scope.  So I can't figure out any way to access that object.  Nada.

I kind of don't think it's possible, and if that's true I have a suggestion for a small change to jsortable.tpl to make it possible, but before I get into it I figured I ought to ask:  Can anyone suggest a way to access that object?

Thanks,
TM

One case is in adding features for note comments (http://blog.civicrm.org/blogs/allenshaw/adding-privacy-and-comments-civicrm-notes). 

To display comments for a note, we do something like this:
# fetch comments via AJAX
# insert into the table one row for each comment, directly below the parent note.
# toggle the "view comments" action link to a "hide comments" action link

Even without access to the DataTables object, we can still just insert the rows into the DOM using jQuery, though this means that DataTables will be unaware of the new data in those rows. That works fine at first, but it gets tricky when the user then uses DataTables sorting to re-order the table.  In that situation, DataTables re-draws the table without the new rows, so the rows are effectively hidden; however, the "hide comments" link is still displayed for that note row.

Somehow I need to improve this in one of two ways:  1) have the child comments sort together with the parent note, which means injecting that data into the table with DataTables' fnAddData API function or similar, and modifying the sort algorithm;  or instead, 2) let the rows be hidden on sort, but then to inject some code to toggle "hide comments" back to "view comments" when the DataTables sorting event is fired. 

The other case is in a custom page created by another module; we're shooting for seamless integration from the user viewpoint, so we rely on Civi UI conventions and code wherever possible.  That page doesn't add rows to the table, but it does dynamically modify the data in some table cells, again based on user initiating an AJAX call.  Using DataTables' fnUpdate API function we can modify the <td> content in the DOM and additionally modify the data in DataTables' stored data cache, so that the sorting features consider that modified data in the sort.  Otherwise, even if we modify the content of the <td> element itself through the DOM, sorting does not function properly.

- TM

I hope you are developing this feature against 3.2 ?

Actually against trunk at the moment. Better switch to 3.2 branch?

Yes you should use this function.

Right.  Problem is, to access that function, I have to have access to the object itself.  The way jsortable.tpl is currently written, I don't think it's possible to access that object, because it's not assigned to a variable in any scope outside of cj().ready( function {}).

I was thinking that the object would be attached to the table itself, but I can't find it if so.  E.g., something like cj('#optionN').dataTable.fnUpdate(...) tells me that cj('#optionN').dataTable.fnUpdate() is not a function.  Listing the other members of cj('#optionN') didn't turn up any likely candidates either.

The DataTables API reference (http://datatables.net/api) contains many examples of using the API functions, but only by accessing the object through a global var, which is set with the return value of the initialization call. 

The only solution I can think of involves patching jsortable.tpl to store that return value in a well-named global variable.  But maybe there's a way to access this object without that change?

- TM

Thanks, Kurund, for taking the time to think about this one.  After our IRC chat I looked at it more closely and found that, indeed, the code is calling the functions after page load, after dataTable is initialized, as it should.

So I got hold of the DataTables author and asked him about it.  You can see the discussion here:  http://datatables.net/forums/comments.php?DiscussionID=2729

The conclusion is that with DataTables 1.6.2, which we're using in 3.2, this is just not possible.  To make it possible, we wither have to store the return of $('table#foo').dataTable() in global scope, or upgrade to DataTables 1.7.0.

Is there any chance we can discuss upgrading?  Release notes indicate a few possible gotchas (http://datatables.net/upgrade/1.7); I haven't yet tried to check whether the apply to Civi's use of the plugin.

- TM

Okay, great.  Using DataTables 1.7 will help a lot.