Setting options in HTML attributes possible?

jerry1970

Hi all,

I've searched for it, but have not been able to find anything yet. I was hoping to find a plugin that reads html attributes to set the options for a datatable.

I often have tables with a hidden first column for IDs (used by a javascript function to know the database record ID for the current row) and a visible but unsorted column at the end for a menu of user actions (like View Details, Edit, Delete) on the row data.

Instead of using the regular options for the dataTable() function, wouldn't the following be a lot easier (to read, to enter)? Also, when changing the columns in the table, I wouldn't need to change the options for the dataTable() function.

[code]

ID
First Name
Last Name
Country
Date of Birth
Actions

[/code]

Is there any plug-in that does this? Or is there a reason not to want this?

Thanks!
Jerry

allan

Every reason to want it - but I'm afraid it doesn't exist yet. It is something I've been planning for a long time, but never yet had the time to do it. At the moment you'd need to parse the attributes "manually". There are a number of discussions in these forums about this.

I'm planning this as the first new plug-in once v1.10 is released. The attributes will be `data-sorting="..."` etc - i.e. conforming to HTML5 data attributes and camelCase rather than hungarian.

Allan

jerry1970

Thanks. I understand it's basically calling a self-written function that reads the table attributes and then a jQuery(table thead tr th).each() to read the th attributes and set the options for the dataTable() function call. Nothing too complex, but it takes time and that would not be useful if someone else already has spent time on it.

I am going to write one because I think it would save me time real quickly. I'll try and conform to HTML attribute naming and hope my name will not differ too much from the eventual official ones!

I am now working with data-paginate for the table tag and data-visible and data-sortable for the th tags.

Thanks!

allan

I completely agree that this will be very useful! I wish I'd had the opportunity to do it already - but I will make time for it in future.

Allan

jerry1970

I have something working, maybe this is useful for someone else.

As I am currently trying to make DataTables work for yootheme's uikit, I have removed a lot of CSS (because I want to use the uikit styles), and only a small set of the options are useful to us at the moment, but it's a start for someone who wants to add more options to be taken from HTML.

[code]
function HtmlAttributesToDatatableOptions( id ) {

// add a table setting that takes a single or multi array ( col-index, setting-value )
function AddTableSettingSingleMultiArray( setting, value, target ) {
if ( options.hasOwnProperty( setting ) ) {
// property exists: add to array
options[ setting ].push( [ target, value ] );
} else {
// setting does not yet exist: add as multi array, easier to append to
var o = [ [ target, value ] ];
options[ setting ] = o;
}
}

// add a column setting { setting : setting-value, aTarget : [ ... ] }
function AddColumnSetting( setting, value, target ) {
for ( ix in coldefs ) {
if ( coldefs[ ix ].hasOwnProperty( setting ) ) {
if ( coldefs[ ix ][ setting ] == value ) {
coldefs[ ix ].aTargets.push( target );
return;
}
}
}
var o = {};
o[ setting ] = value;
o.aTargets = [ target ];
coldefs.push( o );
}

var options = {};
var coldefs = [];

// read table attributes
if ( jQuery( id ).attr( 'data-paginate' ) ) {
options.bPaginate = ( jQuery( id ).attr( 'data-paginate' ) != "0" );
}
if ( jQuery( id ).attr( 'data-pagelength' ) ) {
options.iDisplayLength = parseInt( jQuery( id ).attr( 'data-pagelength' ) );
}

// read column attributes
jQuery( id + ' > thead > tr > th' ).each(
function( ix, elm ) {
var coldef = {};

// TODO:
// sType: string, numeric, date, html
// sort by ALT or TITLE tag!

// check sortable (0/1)
if ( jQuery( elm ).attr( 'data-sortable' ) ) {
AddColumnSetting( 'bSortable', ( jQuery( elm ).attr( 'data-sortable' ) != "0" ), ix );
}
// check initial sort order (asc/desc) (columna ttribute to table setting!)
if ( jQuery( elm ).attr( 'data-initsort' ) ) {
AddTableSettingSingleMultiArray( 'aaSorting', jQuery( elm ).attr( 'data-initsort' ), ix );
}
// check visible (0/1)
if ( jQuery( elm ).attr( 'data-visible' ) ) {
AddColumnSetting( 'bVisible', ( jQuery( elm ).attr( 'data-visible' ) != "0" ), ix );
}
// check sort column (integer)
if ( jQuery( elm ).attr( 'data-sortcolumn' ) ) {
AddColumnSetting( 'iDataSort', parseInt( jQuery( elm ).attr( 'data-sortcolumn' ) ), ix );
}
// check class (string)
if ( jQuery( elm ).attr( 'data-class' ) ) {
AddColumnSetting( 'sClass', jQuery( elm ).attr( 'data-class' ), ix );
}
}
);

// do not add an empty array
if ( coldefs.length > 0 ) {
options.aoColumnDefs = coldefs;
}

//console.log( options );
return options;
}
[/code]

To use this function, I have this:
[code]
var options = { [set your defaults here] };

// pre-init: read extra options from table attributes (extension for DataTable)
jQuery.extend( options, HtmlAttributesToDatatableOptions( id ) );


// regular way of initializing DataTables
var oTable = jQuery( id ).dataTable( options );
[/code]

In the HTML I have this:
[code]



id
sort-created
created
description
sort-playdate
actions


[/code]

jerry1970

I found the different syntaxes of adding settings (objects and arrays, nested, different order of setting name and value and targets, etc.) rather confusing. That was the reason why having html attributes is more readable.