DataTables with json data making TR row clickable

Question

I am using: jquery.dataTables.js from: https://datatables.net

I am trying to make each tr have a link, but some reason this is not working, I tried run in my console on chrome and works, someone can explain me why i can't insert this links in my element?

it is something related to the json data?

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>

jquery:

$(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 I want insert:

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

jsfiddle but not with jquery above: http://jsfiddle.net/f7debwj2/

Deepak Sharma · Accepted Answer · 2017-02-14 11:40:47Z

2

Using of multiple $(document).ready() function is not a good choice. you can use callback function of data table to do some functionality after its creation.

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

answered Feb 14, 2017 at 11:40

Deepak Sharma

1,1471 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robin Mackenzie · Accepted Answer · 2017-02-14 11:43:08Z

Use the render property on the column when you pass the columns into the call to instantiate the table. Here is a link to the documentation and an example below:

$(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',
      "render": function(data, type, full, meta) {
        return '<a href="http://stackoverflow.com">' + data + '</a>';
      }
    }, {
      data: 'place',
      "render": function(data, type, full, meta) {
        return '<a href="http://www.bbc.com/sport/football">' + data + '</a>';
      }
    }]
  });

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/datatables.min.css" />

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/datatables.min.js"></script>

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

Collectives™ on Stack Overflow

DataTables with json data making TR row clickable

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related