Replies

• rdahl Posts: 12Questions: 0Answers: 0

  November 2010

  The datatable does not generate a tr id based on the index of the row, it does not know there is an index for the row. The way I do this is to put the id into the first column of the table, but hide the column, then use something like:
  var rowID = datatable().fnGetData(row)
  id = rowData[0]
  to pass the id to a url or ajax function
  look at the docs for fnGetData
• fubowl Posts: 4Questions: 0Answers: 0

  November 2010 edited November 2010

  Hey, thanks much rdahl. Glad someone got back to me because I really like datatables over other ajax grids, and I've looked at a LOT recently.
  
  Tell me though, are you suggesting using hidden fields or creating a column dynamically with the dnDrawCallback function? If so, would you mind appending your code to do so? Not exactly new to js but only started jquery a few days ago.
  
  So far I have:
  [code]
  $(document).ready(function() {
  // Init DataTables
  
  var oTable = $('#example').dataTable( {
  "bProcessing": true,
  "bServerSide": true,
  "sPaginationType": "full_numbers",
  "sAjaxSource": "../examples_support/server_processing.php",
  "fnDrawCallback": function (nRow, aData) {
  $('td', this.fnGetNodes()).editable( '../examples_support/editable_ajax.php', {
  "callback": function( sValue, y ) {
  var aPos = oTable.fnGetPosition( this );
  oTable.fnUpdate( sValue, aPos[0], aPos[1] );
  },
  "submitdata": function ( value, settings ) {
  return { "column": oTable.fnGetPosition( this )[1],
  "row_id": this.parentNode.getAttribute('id') };
  },
  "height": "14px"
  } );
  
  }
  } );
  
  $('#refresh_table').click( function () {
  oTable.fnDraw();
  } );
  [/code]
  
  ps. for anyone looking for a template for server-side data which is editable using jEditable, the above code works for that. Course it won't help you much if you can't update the sql like me.
• rdahl Posts: 12Questions: 0Answers: 0

  November 2010

  fubowl,
  I do this to create the table:
  [code]
  obj.getTableColumns = function (name) {
  if (name === "requirements") {
  return ([
  {"sWidth":"0%", "aTargets":[0], "bVisible":false},
  {"sWidth":"20%", "aTargets":[1]},
  {"sWidth":"10%", "aTargets":[2]},
  {"sWidth":"60%", "aTargets":[3]},
  {"sWidth":"10%", "aTargets":[4]}
  ]
  )
  }
  ... SNIP ...
  // Creates tables
  // the info object contains the name of the table, used to get the appropriate column defs, the url for getting the
  // data via ajax, and the DOM element of the table to transform with the sweet magic that is datatables
  obj.createTable = function (info) {
  
  var columns = obj.getTableColumns(info.name);
  return info.tableEl.dataTable({
  "sScrollY":300,
  "bSort":false,
  "bSortClasses":false,
  "bJQueryUI":true,
  "bAutoWidth":false,
  "bRetrieve":true,
  "sPaginationType":"full_numbers",
  "bServerSide":true,
  "iDisplayLength":100,
  "aoColumnDefs": columns,
  },
  "sAjaxSource": info.url
  });
  }
  [/code]
  
  And then this to get the row id:
  [code]
  // open new page for Requirement detail
  $(".newPageRequirementDetail").live('click', function(e) {
  e.preventDefault(); // stop Link follow
  var tr = $(this).closest("tr").get(0);
  var url = $(this).attr("href")
  var rowData = COMPLID.dataTable.requirementTable.fnGetData(tr);
  var id = rowData[0];
  window.open(url + id + "/");
  });
  [/code]
  In this example the click handler is actually on a button (actually an that looks like a button) in the row, but could easily be on the row itself if required. I combine the url of the anchor with the id from column 1 (the hidden column) to know what object_id from the db I want the detail for.
  
  hth,
  richard