DataTables с данными JSON делает TR рядом интерактивного

Question

Я использую: jquery.dataTables.js от: https://datatables.net

Я пытаюсь сделать каждый Tr есть связь, но какие-то причины это не работает, я пробовал работать в моя консоль на хроме и работает, кто-то может объяснить мне, почему я не могу вставить эти ссылки в свой элемент?

Это что-то связано с данными 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> 

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 Я хочу, чтобы вставить:

$('#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/ 

Answer 2

Используйте render свойства на колонке при передаче столбцов в вызов для создания экземпляра таблицы. Вот ссылка на the documentation и пример ниже:

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