javascript - 如何为每一行添加一个行ID？

Question

我正在尝试使用 jquery 数据表将行 ID 添加到 tr。我什至试过这个例子 http://datatables.net/release-datatables/examples/server_side/ids.html但似乎没有用，我使用了他们相同的 JSON 文件。

如有任何帮助，我们将不胜感激。

它应该给出类似的东西

<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>

>更新代码

<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>

Answer 1

您可以将以下内容添加到您的数据表初始化选项中:

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

要使用特定表格单元格的值作为每一行的 ID，请从 aData 变量中提取它:

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

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