jQuery DataTable API structure - confused with javaScript code

pavlom

Hello.

I have some task to solve with jquery DataTables we use on our application. I need to add a feature, the DataTables currently seems not have. To build this feature I tried to debug to understand framework structure and often confused, because while call a method it often lends to function with different name and arguments structure. Why this happen? Here sample: Here call to put data in table

DataTableAPI1.png

Step into in debugger and I get to confusing place:

DataTableAPI2.png

1. I get in anonymous function instead of add method called. This could be if add method was assigned with this anonymous method. Right?
2. Why it takes two arguments? Why data.data argument appears on second place instead of first? I know javaScript allows to use different arguments number in method but what about change argument place?
3. The anonymous function I'm currently in, returned from outer wrapper function which assigned to methodScoping variable. Why to wrap in this manner and return?

May be here used some design pattern I cannot identify. Please help.

allan

Perhaps you could explain what it is that you are trying to achieve and show me your plug-in API code.

Allan

pavlom

Thanks for your interest.

My task is search modification. When drop-down cells occurs in row, they are not used in search. I would like to use their text value in search as other fields.

But really this is the other topic, because I have few options and want to understand framework better, before move further with that. Any way DataTables used in our application and it would be good to know it for future work. All questions I have for this topic are in my first message.

As about my framework API code. The first screenshot is exactly it is. I did screenshot to make easier understand what i see in debugger. The parameter with funny name "data.data" is json object with DataTable data, and all line called inside ajax callback when data get from server. (The json is nothing special - very similar to https://datatables.net/examples/data_sources/ajax.html)

So the code of my framework is

table.rows.add(data.data);

This command populates DataTable (table variable) with data.

The second screenshot is source code of jquery.dataTables.js file. So when I step in from my framework line, I get to:

var ret = fn.apply( scope, arguments );

And this leads me to rise the questions in my first post.

allan

I get in anonymous function instead of add method called. This could be if add method was assigned with this anonymous method. Right?

I don't actually understand your question I'm afraid. Could you restate it so I can try to understand it?

In the code you show:

if ( ! jQuery.isEmptyObject( data.data[0] ) ) {
  ...

What happens if data.data is an empty array? You'll get an error. You probably need to add a check for data.data.length.

Why it takes two arguments? Why data.data argument appears on second place instead of first? I know javaScript allows to use different arguments number in method but what about change argument place?

This is asking about the following right?:

fn.apply( scope, arguments );

The scope is what this will be assigned to in the callback function and basically allows the API methods to be used inside the API callbacks! i.e. you can do this.draw() inside a callback.

The MDN documentation details Function.prototype.apply().

The anonymous function I'm currently in, returned from outer wrapper function which assigned to methodScoping variable. Why to wrap in this manner and return?

Its basically to ensure that the callback scope is the API context. Its also used to add the API methods to the current instance - so for example you could do table.draw().draw().draw().draw(). Obviously you wouldn't do it that way, but it does prove to be useful for things like rows.add() where you often want to chain draw() on to that.

Allan

pavlom

Hi

This makes questions 1,2 clear. The problem was I misunderstand how Function.prototype.apply() works.

But the third ... I understand how to use chaining with methods calls, but cannot get how the code shown help on this.

What is the difference if this code would be without anonymous function:

            methodScoping = function ( scope, fn, struc ) {

                    var ret = fn.apply( scope, arguments );
    
                    // Method extension
                    _Api.extend( ret, ret, struc.methodExt );
                    return ret;

            };

instead of:

            methodScoping = function ( scope, fn, struc ) {
                return function () {
                    var ret = fn.apply( scope, arguments );
    
                    // Method extension
                    _Api.extend( ret, ret, struc.methodExt );
                    return ret;
                };
            };

The first will contain function in methodScoping variable which returns ret value, while second will contain function which returns anonymous, that will returns the same ret value. Why anonymous nested here?

It could be I mistaken with scopes, but could you comment?

allan

The first is not returning a function. It is immediately executing whatever is in fn instead of waiting for the closure function to be executed. It has to return a function so that the developer using the API can say (via code) when it should be executed.

Allan

pavlom

Got it now. Thanks!