Replies

• allan Posts: 63,214Questions: 1Answers: 10,415 Site admin

  September 2013

  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 Posts: 12Questions: 0Answers: 0

  September 2013

  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 Posts: 63,214Questions: 1Answers: 10,415 Site admin

  September 2013

  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 Posts: 12Questions: 0Answers: 0

  September 2013 edited September 2013

  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 Posts: 12Questions: 0Answers: 0

  September 2013

  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.