New and having quite a few problems

dowzer

Firstly thanks for a great piece of work! I came across Datatables when I bought a template which used Datatables so I have not done most of the coding or implementation myself. I have since downloaded 1.8.2 so am using the most recent version.

I am having a number of challenges which I am hoping someone can help me with but, before I do that, can someone point me to a real idiot numpty guide on how to install and set this up from scratch? For example, in the usage and examples sections I can see snippets of code, where should these go? Are they meant to go into the head of the html page or do they go into the js script?

The reason I am asking is I cannot see any code of this nature in my files so am baffled how it is being called - the js file is called in the head of the page and the tables in question have a class called datatable but surely that only covers styling so how is the code actually using datatables?

Sorry for the dumb questions but rather than just asking how to fix the problems I am having I would rather understand how it is all working and then try and solve them myself if I can :)

Jason

GregP

Hi Jason,

If you are using a theme that implements DataTables, they may be including it in interesting ways. For example, in my own application jquery.dataTables.js is conditionally passed as an argument to my Head.js function call.

The basic initialization requires this:

1. include jQuery in the document head
2. include jquery.dataTables.js in the document head
3. include any CSS files that you are borrowing from existing examples, or have a CSS file for writing your own from scratch
4. include a table on your page that you can target with dataTable() function (most people only target one at a time and use an ID for the table for quick selection). This table can either be full of data (DataTables then just gets used for sorting and presentation), or a skeleton of a table, with a colspanned td that is used when you have progress enabled:

[code]



Name
Address
Phone




Loading data from server



[/code]

Using a skeleton table implies that you are going to fill it in with data from another source (AJAX or server-side being the most common, JavaScript array being used for some very interesting implementations such as websocket usage).

5. Call the dataTable function on the table. Where you make this call is up to you, really. A lot of people just put a script tag right before closing their body tag, and add it to a jQuery document ready function. You could have an additional external script file ('myAppWithWhateverName.js') that you include in the head after the DataTables script. It doesn't matter. Somewhere in there, inside a document ready function, you have the following:

a) if the data is all there and defaults are fine:

[code]
$('#myTable').dataTable();
[/code]

b) if you need to pass parameters such as an AJAX source:

[code]
$('#myTable').dataTable({
'sAjaxSource': 'mysource.php',
'bFilter': false // disable filtering
});
[/code]

Most of the examples on this forum and in the example code revolve around the second scenario. Not necessarily in terms of having an Ajax source, but simply in terms of using various parameters to achieve different effects. A big skill to have to get the most out of DataTables is to understand how to use the callback parameters to modify table rows for binding events or adding extra details.

Hope that helps!

dowzer

Ok that makes a lot of sense - thank you! Turns out the developer of the template had added the code to the bottom of a validation script - very weird place and I only found it by opening every single JS script and searching for the code.

Still struggling with date sorting but seems to be lots of posts and plug ins to consider so I will have a look around and see how I get on.

Thanks again
JAson