[英]How i can navigate desktop app to default mail provider set in my system while on click button
[英]How can I set the default content of my jQuery DataTable cell into a clickable button?
如果我的數據表輸出的類型是一個對象,我希望整個單元格將變成一個鏈接。
直到現在我只能設法將單元格內的數據轉換為鏈接,但我沒有實現將整個單元格轉換為鏈接。
"render": function (data, type, row, meta) {
var link = "{{output.content}}";
var type = typeof data;
if(type == "object"){
if(Array.isArray(data)){
data.forEach(function(obj) {
if (obj.hasOwnProperty("category")) {
data.sort((a,b) => Number(a.category.id) - Number(b.category.id));
}
})
return (data.map(obj => obj.category ? `<div style="border-color:${obj.category.color}" class="circle"></div> ${obj.name}` : ` <a href="`+content+`">This is my link</a>${obj.name}`)).join('<br>');
}else {
if(data){
return data.name;
} else {
return '';
}
}
} else {
if(String(data).indexOf('#') == 0) {
return '<div style="border-color:'+ data +'" class="circle"></div>';
} else {
return data;
}
}
},
"targets": "_all"
Try this. Just replace the button with a link.
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "data/arrays.txt",
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button>Click!</button>"
} ]
} );
$('#example tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
alert( data[0] +"'s salary is: "+ data[ 5 ] );
} );
} );
HTML
=============
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
您可以使用columns.className
選項將某些類分配給特定的單元格,而不是使這些單元格顯示為帶有某些CSS的超鏈接,最后,將單擊處理程序附加到該特定的類上,它將重定向到所需的URL:
const srcData = [ {id: 1, name: 'stackvoerflow', url: 'https://stackoverflow.com'}, {id: 2, name: 'wikipedia', url: 'https://wikipedia.org'}, {id: 3, name: 'github', url: 'https://github.com'} ]; const dataTable = $('#mytable').DataTable({ dom: 't', data: srcData, columns: [ {title: 'id', data: 'id'}, {title: 'name', data: 'name', className: 'link'} ] }); $('#mytable').on('click', '.link', function(){ window.location.href = dataTable.row($(this).closest('tr')).data().url; });
.link {cursor: pointer}
<!doctype html> <html> <head> <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> </head> <body> <table id="mytable"></table> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.