數據表與JSON數據使TR行可點擊

我使用：從jquery.dataTables.js：https://datatables.net 數據表與JSON數據使TR行可點擊

我試圖讓每個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/

來源

2017-02-14 Raduken

使用多個$（document）.ready（）函數不是一個好的選擇。您可以使用數據表的回調函數在創建後執行一些功能。

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

來源

2017-02-14 11:40:47

簡單實用，謝謝。 – Raduken

當你通過列入調用，以實例表使用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>

來源

2017-02-14 11:43:08

數據表與JSON數據使TR行可點擊

回答

相關問題