default sort column

[torstenroeder]

Can anybody give an example of how to define a default sort column? Is this is possible at all? Best Regards!

BTW I like "datatable", it is lightweight and highly performant even on large tables.

[Holt59]

You can use the sortKey and sortDir options.

For instance, if want the column 0 / 2 / 3 and 5 to be sortable, and you want to sort regarding the second column in descending order, you can use:

var opts = {
    'sort': [true, false, true, true, false, true],
    'sortKey': 2,
    'sortDir': 'desc'
};

If the table contains object as row (and not simple array), you can use the key you want to sort on, e.g.:

var opts = {
    'sort': {
        id: true,
        name: true,
        mail: false
    },
    'sortKey': 'name',
    'sortDir': 'asc' // this is the default
};

[torstenroeder]

Thanks! Sorry, I still could not make it work. The table header looks like the 2nd column is sorted (little triangle ponting down), but it is not. Actually the sorting does not work at all. Code looks like this:

var datatable = new DataTable(document.querySelector('#dataTable'), {
    pageSize: 20,
    sort: {a:true, b:true, c:true, d:false},
    //sort: [true, true, true, false],
    sortKey: 'b',
    sortDir: 'desc',
    filters: [true, true, true, false],
    filterText: '*'
});

and my table:

<thead>
    <tr>
        <th data-sort="a">Ord.</th>
        <th data-sort="b">#</th>
        <th data-sort="c">Titel</th>
        <th data-sort="d">Links</th>
    </tr>
</thead>

Any help is appreciated!

[Holt59]

Since you are not specifying the data option explicitly, you will get a 2D array of data, so you need to use numeric keys (0 to 3). Non-numeric key only works if you use custom data inputs:

// This is a 2D array of data, you need to use numeric keys (e.g. here 0 will give you 
// the first name, 1 the last name and 2 the field of study. This is the type of data 
// you get when loading data from an already existing HTML table, as in your case.
var data = [
    ['Isaac', 'Newton', 'Physics'],
    ['Ada', 'Lovelace', 'Computer Science'],
    ['Henri', 'Poincaré', 'Mathematics']
];

// This is a array of object, you can send it directly to the table, and after that you 
// can use non-numeric key
var data = [
    {
        firstname: 'Isaac', 
        lastname: 'Newton',
        field_of_study: 'Physics'
    },
    {
        firstname: 'Ada', 
        lastname: 'Lovelace',
        field_of_study: 'Computer Science'
    },
    {
        firstname: 'Henri', 
        lastname: 'Poincaré',
        field_of_study: 'Mathematics'
    }
];

There might also be issue for the default sort to work (e.g. if you want to sort numeric value that are stored as strings), you can check how the inner data looks like doing the following (e.g. in a dev. console):

var datatable = new DataTable(...);

// query all data
datatable.all();

[torstenroeder]

Sorry, I forgot to mention that I have all data in a HTML table. I prefer it for conversion issues. Is it possible to define the keys within using data-[something]?

[Holt59]

Not currently, if you are applying datatable on an existing HTML table, the data will be stored as a 2D array so you have to use the numeric keys unfortunately.

[torstenroeder]

That would still be fine ... I tried this, but the default sorting does not start. Not sure whether the code is correct (sorry for bothering):

var datatable = new DataTable(document.querySelector('#dataTable'), {
    pageSize: 20,
    sort: [true, true, true, false],
    sortKey: 2,
    sortDir: 'asc',
    filters: [true, true, true, false],
    filterText: '*'
});

[Holt59]

@torstenroeder What happens if you click on the column (to sort)? It is possible that the plugin is not able to sort the data because of their format - I would need to see a chunk of the data (datatable.all()) in order to be more helpful.

[torstenroeder]

Ok, data looks like this:

data:[ [
    "<div class=\"smaller\" title=\"ord\" data-sort=\"18340610\">340610</div>",
    "<div class=\"smaller\" title=\"id\">001</div>",
    "<div class=\"title\">Example</div>",
    "<div><a href=\"example.html?fn=340610.xml\" target=\"_blank\">open</a></div>"
], ... ]

Do you need more information from datatable?

PS. I have practically solved the issue by pre-sorting the data before generating the table. Nonetheless it would still be interesting why default sorting does not start in this case.

[Holt59]

The plugin does not really work if you have DOM embedded in the HTML table, the way to get custom rendering is by customising the lineFormat option usually.

If every cell of the same column uses the same wrapper, the sorting function should work (the filter one might be a little buggy with DOM). Did you look at the console output (development console in your web browser)? Maybe there is an error that could be useful.

[torstenroeder]

Sorry for the (long weekend) delay. To a certain extend I need DOM in the table cells, so I won't be able to avoid it totally. For the moment, sorting works fine when I set a data-sort attribute. The console display gives no errors. So, together with the pre-sorting, everything runs smoothly.

[Holt59]

Closing this for now. Feel free to open a new issue if necessary!