make DataTables more jquery like

boecko

I've notice to many string operation for my taste, where the appropriate jquery function would make things way easier.

Two examples:

A)
[code]
this.fnOpen = function( nTr, sHtml, sClass ) {
....
nNewCell.innerHTML = sHtml;
WHY ? ? Better would be:
$(nNewCell).html(sHtml);
[/code]
benifits:
- jquery handles objects and strings automaticly
- the following code explains it:
[code] oTable.fnOpen(nTr, $('foobar').click(myniftyhandler)) [/code]

B) the innerHTML-calls in fnUpdate, _fnAddData
Why in gods name must fnRender return a string?
change innerHTML to $(..).html and user a free to return objects in the firstrun.
It's not needed to attach EventHandler in some other Callbackfunctions

Because of this reliance on string-paramaters the possibility of spaghetti-code is higher.

allan

There are two advantages to the way it is currently done:

1. Portability - for example I ported DataTables to the Glow library in a couple of hours once.

2. Speed - yes jQuery is damn fast, I'm absolutely not knocking it at all, but there are times when using DOM methods directly are faster. A good example of this was during the 1.6.x series when I switch the data read from jQuery methods to DOM resulting in a massive performance boost.

The downside is that you don't get chaining like you do in jQuery. I 100% agree that the public API DataTables presents is not perfect - there are a lot of changes I want to make to it, many of them backwards incompatible (hence the reason for holding off on them). Indeed the code structure isn't the best either, but it does work, and thus far it's withstood most challenges thrown at it!

If I had the opportunity to work on DataTables full time then there are a lot of changes that I'd like to make. I've got a number of ideas for how the project as a whole can be improved. But sadly at this time, working on DataTables full time isn't an option (bills to pay!). As such, it's a continuously improving project going step at a time. Some day I'll start planning out DataTables 2 with a much cleaner API. I'm looking forward to that day!

Regards,
Allan

boecko

> 1. Portability - for example I ported DataTables to the Glow library in a couple of hours once.
a)innerHTML isn't that portable like you think it is ....
Why innerHTML is bad - Grauw’s web spot http://www.grauw.nl/blog/entry/475
b) the jquery.html() makes some cleanups to avoid memory leaks
if you want it portable you should introduce a wrapper function for that, like:
[code]
function _updateHTMLJQ(el,html) {
$(el).html(html); //for jquery
}
function _updateHTMLProto(el,html) {
$(el).update(html); for prototype
}
//bare metal
function _updateHTML(el,html) {
if(typeof html === "string" ) {
el.innerHTML = html;
}
else {
// cleanChildNodes and appendChild(html)
}
}
[/code]
> 2. Speed - yes jQuery is damn fast, I'm absolutely not knocking it at all
inserting already built DOM-Nodes is IMHO faster than building them again from a String in my case.

allan

Agreed on all points - I know innerHTML isn't always suitable. I've made a note based on your original post to look at fnOpen / fnClose and see if it can be improved. They are probably now the oldest pieces of code in the whole project and well due for an update :-). The API as a whole does need looked at, as I mentioned, to see if it can be make more consistent, more accessible and more useful - again something to look towards DataTables 2.

Allan

boecko

A) I want to add an example, why "fnRender returns a string" is considered evil in my opinion ;)

Think about two jQuery UI -Button in every row, which does a certain action with your dataset ("edit","delete",etc)
- now:
1. prepare the HTML-String in fnRender of the column definition, like
[code]EditDelete[/code]
Note: you can't do jQuery UI-button() here, because you would loose all the magic.

2. write a fnRowCallback that actually does the magic:
[code]$(nRow).find('.jqbuttonaction").button.click(function() {
//code which reads the attribute action and executes the right handler
});
[/code]
That's not straightforward and error prone.

- with $(...).html
1. fnRender is [code]
var span = $('');
$('Edit').click(editHandler).appendTo(span);
$('Delete').click(deleteHandler).appendTo(span);
return span;
[/code]
2. THERE IS NO STEP 2 ;)

B) why don't you take the $() as wrapper-object
in jQuery-mode, it's the jQuery-Object
[code]
function($, window,document) {
... datatables code ....
})(jQuery, window, document);
[/code]
in Prototype it's something like this
[code]
var protoWrapper = function(el) {
return {
html: function(sHtml) {
$(el).update(sHtml)
},
// every other function you want to have portable
}
};

function($, window,document) {
... datatables code ....
})(protoWrapper, window, document);
[/code]

boecko

I've forked DataTables at github .. http://github.com/boecko/DataTables, so you can see my changes.