CODEWITHSUNDEEP
datatables
kwah
kwah

Reputation: 1149

jQuery DataTables - understanding how data is fed in, mRender/mData..?

I am struggling with grasping jQuery datatables (v1.10.1 via CDN), and the conventions used in the current version. Various documentation is confusing/lacking in 'complete' examples at best, conflicting at worst.

  1. Please explain the current (v1.10.1) best practices with regards to defining the contents of a field. I see lots of information about columns/mData/mRender/mDataProp, amongst others and I feel overloaded as to what each one means and/or when each should be used (see the 'research' section below for examples).

  2. Secondly, where do I stand with regards to using dates and "set"/"display"/"filter"/"sort" (assuming that this is the route to take, with mData/mRender)?

Example

EDIT: Here's an example of some data in a fiddle: 

var massData = [
  { "Column1": "test1", "Timestamp": "Sun Jul 27 2014 14:42:20 GMT+0100 (GMT Standard Time)", "Date": "18/10/2012" }, 
  { "Column1": "test2", "Timestamp": "Mon Jul 28 2014 14:42:20 GMT+0100 (GMT Standard Time)", "Date": "18/10/2016" }, 
  { "Column1": "test3", "Timestamp": "Wed Jul 22 2014 14:42:20 GMT+0100 (GMT Standard Time)", "Date": "18/01/2012" }
];

var keys = ["Column1", "Timestamp", "Date"];
var columns = [];
for (var keyIndex = 0; keyIndex < keys.length; keyIndex++) {
    columns.push({
        "title": keys[keyIndex],
        "data": keys[keyIndex],
        "defaultContent": ""
    });
}


$('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');

$('#example').dataTable({
    "data": massData,
        "deferRender": true,
        "scrollY": 400,
        "scrollX": true,

        "columns": columns
});

http://jsfiddle.net/2M97f/

Research

  1. I see this question which has code using mRender, though my understanding is that filtering/sorting will use the actual data

  2. I see this example and this documentation which uses aoColumnDefs, aTargets and mData..?

  3. This question has a reply to "Filtering using the rendered text", but uses aoColumnDefs, mDataProp, and a 'renderDate()' function, but does NOT make use of mRender

  4. The documentation for mRender and mData suggests that mRender depends upon mData..

  5. Other documentation suggests fnRender/bUseRendered is deprecated

Upvotes: 3

Views: 3578

Answers (1)

bpeterson76
bpeterson76

Reputation: 12870

First of all, you're looking at examples from previous version (which are obvious based on the Hungarian Notation) So any example with mData may work now, but could be rendered unusable once legacy support is removed. While they can give you an idea of a direction to go, it's dangerous to find methods in the old API and then expect them to work as-is with 1.10. There is a version converter document that helps a lot to understand equivalents between old and new.

My preference is to use this example that uses the "columns" definition to specify the data field easily. You can also quickly and easily define things for each column there, such as searchable, title, visible, etc. See the API for others.

So, a sample Datatable in my code would look like this:

$('#example').DataTable( {
    data: data,
    columns: [
        { data: 'keyoffield1', title:'name title', visible:'false' },
        { data: 'keyoffield2', title:'position title' },
        { data: 'keyoffield3', title:'salary title here' },
        { data: 'keyoffield4', title:'office title here' }
    ]
} );

As for sorting, it's setup to recognize date fields out of the box for you, as you can see in your example (click on the header to change the sort) However, if you want to set default sorts such as asc, desc, etc, that's pretty easily done with columns.sort as you'll see in the API. There is a simple plugin to enhance sorting on fields that may not be formatted in a way that DataTables is built to use.

fnRender is gone, the closest equivalents are explained here. If you ignore those examples and the complaining that happened when it was removed, it's pretty easy to see how Allan was proceeding with the new methods like column.render for example.

Upvotes: 2

Related Questions