Using DataTables

sjw01

i've been playing with DataTables now for a few months and found it's flexibility to be quite amazing.

What I am really struggling with is the documentation and to difference between DataTables and jQuery.

is there any alternate resources on DataTables?

rf1234

"is there any alternate resources on DataTables?"

not really. I think the documentation is fairly good. I would go by the examples and use the search function in the forum. Or use Google as well. Sometimes you'll find stack overflow postings as well. I use Data Tables with Editor only. That seems to be a lot more convenient than using Data Tables stand alone because you don't have to worry very much about how to handle the communication between client and server. I would also take a look at the Blog.

"What I am really struggling with is the documentation and to difference between DataTables and jQuery."

well in many cases you can use the api or you can use "native" jQuery. It is up to you while it is advisable to use the api wherever possible.

allan

What I am really struggling with is the documentation and to difference between DataTables and jQuery.

Perhaps you could give an example of what you are struggling with and I'll attempt to explain it.

Allan

colin

Hi @sjw01 ,

I'm new to both, I didn't know JavaScript, jQuery or DataTablesin the slightest 6 months ago! It sounds like you may be in a similar position.

What I would suggest is doing an online course - I did this one from W3Schools and found it very helpful, and then go through the examples on the DataTables site.

As @rf1234 there's loads of resources for DataTables all over the web - StackOverflow, blogs and even people posting their own plugins. Best bet is to Google for a question and you'll find an answer fairly easily!

Hope that helps,

Cheers,

Colin

sjw01

@allan where I am really struggling is how to access the table to perform actions on it.

e.g. in some parts of code I can call table.column() and get the column and in other parts, I call it and get Cannot read the property of 'column'.

e.g. I have a column index and I want to get the title text from the header column but it throws an error.

http://live.datatables.net/patajaqa/1/

See the line with: console.log(table.column(index));

All I want to do is get the column that I am in and get the header/title to put inside the select drop down but i keep getting errors and then getting really frustrated... It worked further up - why not now... and if not now, how do I access it

The documentation provides examples that work in certain scenarios and not in others which is where I pull my hair out...

sjw01

Also, I'm looking for an easy reference for each object and its methods and properties.

e.g. tables().header() - what can I access?

The documentation says it returns DataTables.Api - but how do I know what the references are? What methods and properties can I access?

Also, within the DataTable intialisation, I call headerCallback()

But - how do I reference anything e.g. header()

I call this.header() and it throws an error
I call table.header() and it throws an error

I am literally in the table instance and I can't reference it...

allan

All I want to do is get the column that I am in and get the header/title to put inside the select drop down

Inside the columns().every() method, this is the same as table.column(index). So you can do: this.title() and this.searchable() as you have done on the next line.

The documentation provides examples that work in certain scenarios and not in others which is where I pull my hair out...

Yup - it is impossible to cover all cases. We try to make the examples generic so you can learn from them and apply them in to your own use case. That isn't always stright forward unfrotunately.

Also, I'm looking for an easy reference for each object and its methods and properties.

The full reference is here.

Also, within the DataTable intialisation, I call headerCallback()
I am literally in the table instance and I can't reference it...

Yes, this one is as annoying as hell. You are in the DOM node instance of the table here - not a DataTables API instance (hence why you can't call table.header() etc. The new API was only introduced in 1.10, which is why it isn't the context for the callbacks (backwards comaptibility). I'll add a note to the callback page stating this - I see it is missing at the moment.

In the header callback you need to get information from the header from the thead parameter (which is the DOM node). That said, I don't think you really need a headerCallback here - looks like you are trying to add another filter row on every call!

Allan

sjw01

Thanks - I am going to read the reference.

I tried your suggestions and they don't work which makes me think I'm not the only one that expects certain behaviors that don't appear to happen

! Inside the columns().every() method, this is the same as table.column(index). So you can do: this.title() and this.searchable() as you have done on the next line.

this.title() = Uncaught TypeError: this.title is not a function
this.title = undefined

I tried to get creative and manually create a new row in headerCallback:

headerCallback: function( thead, data, start, end, display ) {

    var filterRow = '<tr>';
    for (i=0; i < end;i++) { filterRow += '<td></td>'; }
    filterRow += '</tr>';

    $('#openro-data thead tr:last').after(filterRow);

}

This worked BUT... It draws on every change, creating a new row each time.

as per example: http://live.datatables.net/patajaqa/1/edit

I've tried a few options but can't seem to get it working.

How can I count the rows in thead? so I only create the row if there is 1 header row
e.g.

if (thead.rows < 2)

colin

Hi @sjw01 ,

To get the number of rows in the header, you could use plain jQuery

$('#openro-data thead tr').length

or you could use jQuery with the API:

$('tr', table.table().header()).length

Regarding this, this.title() = Uncaught TypeError: this.title is not a function, I think Allan made a typo in his comment - replace title() with header()

Cheers,

Colin