javascript - 带有 json 数据的数据表使 TR 行可点击

Question

我正在使用:jquery.dataTables.js 来自:https://datatables.net

我试图让每个 tr 都有一个链接，但由于某些原因这不起作用，我尝试在我的 chrome 控制台中运行并且有效，有人可以解释为什么我不能在我的元素中插入这个链接吗？

是不是跟json数据有关？

html:

<div class=" dashboard">
  <div class="col-md-8 no-padding">
    <div class="form-group col-md-4 no-padding">
      <select class="form-control" id="sel1">
        <option value="Filter by">Filter by country </option>
        <option value="All">All</option>
        <option value="China">China</option>
        <option value="EUA">EUA</option>
        <option value="Spain">Spain</option>
      </select>
    </div>
  </div>

  <br>
  <br>
  <table id="example" class="display" width="100%" cellspacing="0">
    <thead>
      <tr>
        <th>First name</th>
        <th>Place</th>

      </tr>
    </thead>
  </table>

j查询:

$(document).ready(function() {
  var dt = $('#example').dataTable();
  dt.fnDestroy();
});

$(document).ready(function() {
  var url = 'http://www.json-generator.com/api/json/get/crcCiZXZfm?indent=2';
  var table = $('#example').DataTable({
    ajax: url,
    columns: [{
      data: 'name'
    }, {
      data: 'place'
    }]
  });

  $('#sel1').change(function() {
    if (this.value === "All") {
      table
        .columns(1)
        .search('')
        .draw();
    } else {
      table
        .columns(1)
        .search(this.value)
        .draw();
    }
  });
});

$(document).ready(function() {
  $('#example tbody tr').attr('onclick', "document.location = 'edit.html'");
});

jquery 我要插入:

$('#example tbody tr').attr('onclick', "document.location = 'edit.html'");

jsfiddle 但不是上面的 jquery: http://jsfiddle.net/f7debwj2/

Answer 1

使用多个 $(document).ready() 函数不是一个好的选择。您可以使用数据表的回调函数在创建后执行一些功能。

updated fiddle is: http://jsfiddle.net/dssoft32/f7debwj2/4/