I am trying to add row ids to tr using jquery datatables. I even tried the example .html but didn't seem to work, I used their same JSON file.

Any help would be greatly appreciated.

It should give something like

<tr id="row_7">
  <td>Emkay Entertainments</td>
  <td>Nobel House, Regent Centre</td>
  <td>Lothian</td>
</tr>
<tr id="row_8">
  <td>The Empire</td>
  <td>Milton Keynes Leisure Plaza</td>
  <td>Buckinghamshire</td>
</tr>

> Updated code

<script type="text/javascript" charset="utf-8">
  $(document).ready(function () {
    var oTable = $('#example').dataTable(
      /** column structure and ppoluating columns **/ {
      "aoColumnDefs": [{
          "aTargets": [0],
          //"mData": "download_link",
          "mRender": function (data, type, full) {}
        }, {
          "aTargets": [1],
          //"mData": "download_link",
        }, {
          "aTargets": [2],
          //"mData": "download_link",
        }, {
          "aTargets": [3],
          //"mData": "download_link",
        }, {
          "aTargets": [4],
          //"mData": "download_link",
        }],
      "fnRowCallback": function(nRow, aData, iDisplayIndex) {
        nRow.setAttribute('id',some_variable);
      },
      "bFilter": false,
      "sScrollY": "300px",
      "bPaginate": false,
      "bProcessing": true,
      //"bServerSide": true,
      "sAjaxSource": "media/sample.json"
    }
  /*** End of column structure **/).makeEditable({
      sUpdateURL: "UpdateData.php",
      sAddURL: "AddData.php",
      sAddHttpMethod: "GET", //Used only on google.code live example because google.code server do not support POST request
      sDeleteURL: "DeleteData.php"
    });
  });
</script>

HTML

<div id="demo">
  <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
      <tr>
        <th width="20%">field</th>
        <th width="25%">field 2</th>
        <th width="25%">field 3</th>
        <th width="15%">field 4</th>
        <th width="15%">field 5</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <div class="add_delete_toolbar" /></div>
  <div class="spacer"></div>

I am trying to add row ids to tr using jquery datatables. I even tried the example http://datatables/release-datatables/examples/server_side/ids.html but didn't seem to work, I used their same JSON file.

Any help would be greatly appreciated.

It should give something like

<tr id="row_7">
  <td>Emkay Entertainments</td>
  <td>Nobel House, Regent Centre</td>
  <td>Lothian</td>
</tr>
<tr id="row_8">
  <td>The Empire</td>
  <td>Milton Keynes Leisure Plaza</td>
  <td>Buckinghamshire</td>
</tr>

> Updated code

<script type="text/javascript" charset="utf-8">
  $(document).ready(function () {
    var oTable = $('#example').dataTable(
      /** column structure and ppoluating columns **/ {
      "aoColumnDefs": [{
          "aTargets": [0],
          //"mData": "download_link",
          "mRender": function (data, type, full) {}
        }, {
          "aTargets": [1],
          //"mData": "download_link",
        }, {
          "aTargets": [2],
          //"mData": "download_link",
        }, {
          "aTargets": [3],
          //"mData": "download_link",
        }, {
          "aTargets": [4],
          //"mData": "download_link",
        }],
      "fnRowCallback": function(nRow, aData, iDisplayIndex) {
        nRow.setAttribute('id',some_variable);
      },
      "bFilter": false,
      "sScrollY": "300px",
      "bPaginate": false,
      "bProcessing": true,
      //"bServerSide": true,
      "sAjaxSource": "media/sample.json"
    }
  /*** End of column structure **/).makeEditable({
      sUpdateURL: "UpdateData.php",
      sAddURL: "AddData.php",
      sAddHttpMethod: "GET", //Used only on google.code live example because google.code server do not support POST request
      sDeleteURL: "DeleteData.php"
    });
  });
</script>

HTML

<div id="demo">
  <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
      <tr>
        <th width="20%">field</th>
        <th width="25%">field 2</th>
        <th width="25%">field 3</th>
        <th width="15%">field 4</th>
        <th width="15%">field 5</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <div class="add_delete_toolbar" /></div>
  <div class="spacer"></div>

• javascript
• jquery
• datatables

• Did you include "DT_RowId": "some_id" in your JSON for each row? – Plynx Commented Jan 9, 2013 at 18:24

1 Answer 1

You can add the following to your dataTables initialization options:

"fnRowCallback": function(nRow, aData, iDisplayIndex) {
    nRow.setAttribute('id',some_variable);
}

To use a specific table cell's value as the ID for each row, extract it from the aData variable:

"fnRowCallback": function(nRow, aData, iDisplayIndex) {
    nRow.setAttribute('id',aData[0]);
}

http://www.datatables/examples/advanced_init/row_callback.html