Using KeyTable and DataTables with multiple tables on the same page

Some years ago, when DataTables and KeyTables where respectivly at version 1.5.2 and 1.0.4 I had to implement multiples tables in a same page using each both plugins. The final work was a bit more complicated because each table was also using jEditable.

Because this work had been done in a very specific project - and I'm a really busy guy - I've never took the time to publish it to be suitable for a general usage. What an error to not have built it in this way directly !
I will burn myself if I was not such sensible person.

Recently someone has asked me if I was able to mix DataTables and KeyTables with 2 tables in a same page.
This was for me the opportunity to port my work to recent version of DataTables and KeyTables, respectively 1.9.4 and 1.1.7 and cleaning specific work.

So, in the attached file you will find a working example of KeyTable and DataTables working together with multiple tables on the same page.
In my original work, DataTables had been patched. With version 1.9.4 no patch was required.

Final work has been accomplished by creating a new object KeyDataTable wich allow to create a table using both plugins.
But this new object is not enought by itself. I had to refactor part of KeyTable.js (all in fact, even a simple part will have been required) to make it working as a real javascrip object: actual design was preventing from the 2 plugins to properly work with multiple tables because it does not declare all functions and member variables has "this" attributes:

function KeyTable ( oInit )
{
  var _oDatatable = null;
   function _fnBlur()
    {
        _fnRemoveFocus( _nOldFocus );
        _iOldX = null;
        _iOldY = null;
        _nOldFocus = null;
        _fnReleaseKeys();
    }
}

In place of:

function KeyTable ( oInit )
{
  this._oDatatable = null;
  this._fnBlur() = function()
    {
        this._fnRemoveFocus( this._nOldFocus );
        this._iOldX = null;
        this._iOldY = null;
        this._nOldFocus = null;
        this._fnReleaseKeys();
    };
}

Sometimes this had no effect, but in some other cases, KeyTable does not know to which datatable it is speaking and behaviour is undefined.
Also, in _fnInit() function I had to remove the call to jQuery.live() else table cells were associated with onClick of each table.
I have not taken time to investigate this longer, but this work around is working.
I let you do a diff with the original version if required.

I hope you will find it usefull.

Fichier attachéTaille
KeyDataTable.tgz140 Ko
Votre notation : Aucun Moyenne : 4.5 (8 votes)

DataTables and KeyTable were

DataTables and KeyTable were two very useful tools but they had that big problem when you needed multiple tables in the same page.

Now this is perfect! Thanks a lot for the effort you put into it :)

Keep up the good work!