I am using javascript dataTable and I'm populating a table by getting the data via an api link this:
jQuery.get(api_url_here", function(dataSet){
jQuery('#myTable').DataTable( {
data: dataSet,
columns: [
{ "data": "id", "title": "theId" },
{ "data": "name", "title": "theName" }
]
});
});
<table id="myTable" class="display"></table>
This all works as required but I need one of the columns to have a link created so that when the user clicks the id it will go to the url assigned with the id...
For example: theId
How can I do this with dataTable?
"ajax": "./pasien/look/",
aoColumns: [
{ "mData": null }
],
columnDefs: [{
"targets": 0,
"data": null,
"mRender": function (data, type, row) {
return ''+ row.mr +'';
}
}]
try this, i use ajax for data in datatables.
try like this:
{
"data": "id",
"title": "theId",
"aTargets": [0],
"sType": "numeric"
},
{
"className": '',
"orderable": false,
"data": null,
"defaultContent": '<a href="your link"</a>'
}];
jQuery has a event thats fired when the cell is created, you can then write normal javascript to set it's content with the id:
jQuery.get("api_url_here", function(dataSet){
jQuery('#myTable').DataTable( {
data: dataSet,
columns: [
{ "data": "id", "title": "theId",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a class='display' href='" + oData.id + "'>" + oData.id + "</a>");
}
},
{ "data": "name", "title": "theName" }
]
});
});
I hope it helps you.
I took the answer from https://www.datatables.net/forums/discussion/25111/hyperlink-in-td.
Related
I am trying to pass value parameter through the ajax call to the controller. It is a date value. I am struggling to find a way to pass parameters through this ajax url. Please help.
function dataTable() {
var value = $("#somedatevalue).val();
$("#thisTable").DataTable({
"processing": true,
"paging": false,
"language": {
processing: "<span class='processing-message'><i class='fa fa-circle-o-notch fa-spin'></i> Processing...</span>"
},
ajax: {
url: $('table#thisTable').data("ajaxurl"),
type: "POST",
datatype: "json",
},
"columns": [
{
"data": "column1",
},
{
"data": "column2",
},
{
"data": "column3",
},
{
"data": "column4",
},
{
"data": "column5",
},
{
"data": "Url",
"render": function (data) {
return '<a class="btn btn-info" href="' + data + '">Select</a>';
}
}
],
"dom": 't<"col-lg-3"l><"col-lg-6"p><"col-lg-3"i>'
});
}
You can pass value as query parameter like http://www.url.com?date="17-02-21"
If you are using php use can get the value as $_GET['date']
If you are using node js, you can get value as req.query.date
Consider the following.
function dataTable() {
$("#thisTable").DataTable({
"processing": true,
"paging": false,
"language": {
processing: "<span class='processing-message'><i class='fa fa-circle-o-notch fa-spin'></i> Processing...</span>"
},
"ajax": {
"url": $('table#thisTable').data("ajaxurl"),
"type": "POST",
"data": { "someDate": $("#somedatevalue").val() },
"datatype": "json"
},
"columns": [
{
"data": "column1",
},
{
"data": "column2",
},
{
"data": "column3",
},
{
"data": "column4",
},
{
"data": "column5",
},
{
"data": "Url",
"render": function (data) {
return '<a class="btn btn-info" href="' + data + '">Select</a>';
}
}
],
"dom": 't<"col-lg-3"l><"col-lg-6"p><"col-lg-3"i>'
});
}
First you must address the Typo in your jQuery Selector. Then you can adjust your Ajax parameters to include a data.
See more here: https://datatables.net/reference/option/ajax.data
In principle it operates in exactly the same way as jQuery's $.ajax.data property, in that it can be given as an object with parameters and values to submit, but DataTables extends this by also providing it with the ability to be a function, to allow the data to be re-evaluated upon each Ajax request (see above).
I have a function like this. How do I hyperlink specific columns? Lets say I want to have the Download FIle render like this Download File And where uploadFile/file is the path of my download link. When I try to run this function, it not fill the table. Could you guys help me out?
function tabela() {
var table = $("#example1").DataTable({
"ajax": "pages/forms/request.php",
"columns":
[
{ "data": "ID" },
{ "data": "SERIAL_NUMBER" },
{ "data": "AUDITOR" },
{ "data": "FALHA" },
{
"data": "ARQUIVO",
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='uploadFiles/" + oData.ARQUIVO + "'>Download File</a>");
},
{ "data": "DATA" },
]
}
);
}
tabela();
In the Table I got 2 columns that I want the same link with attached ID from the item. The frist one from the ID it selft works, But I what to attach the ID to the link of the name it self.
Below is my code to initialize the datatable.
<script>
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data.txt",
"processing": true,
"columns": [
{ "data": "id", "name": "id",
"render": function (data, type, JsonResultRow, meta) {
return ' '+data+' ';
}
},
{ "data": "dob", "name": "dob",
"render": function (data, type, JsonResultRow, meta) {
return '<img src="/img/userpics/'+data+'">';
}
},
{ "data": "name", "name": "name",
"render": function (data, type, JsonResultRow, meta) {
var varempid = THIS_IS_WHAT_I_CANT_DO ;
return ' '+data+' ';
}
},
{ "data": "position", "name": "position" },
{ "data": "status", "name": "status" }
],
responsive: true,
'iDisplayLength': 6,
"order": [[ 0, "asc" ]],
"lengthMenu": [[50, 100, 500, 1000, -1], [50, 100, 500, 1000, "All"]],
"pageLength": 50
} );
} );
</script>
I think you can get all the data from the row inside the JsonResultRow. You can try console.log(JsonResultRow) to view all the data for the row.
{ "data": "name",
"name": "name",
"render": function (data, type, JsonResultRow, meta) {
var varempid = JsonResultRow['id'];
return ' '+data+' ';
}
},
I have my jQuery datatable plugin installed and I've initialized it like this:
$('#datatable-responsive2').DataTable({
// data: data,
// deferRender: true,
"pageLength": 25,
"bLengthChange": false,
"processing": true,
"serverSide": true,
"filter": false,
"orderMulti": false,
"ajax": {
"url": "/Administrator/LoadData/",
"type": "POST",
"datatype":"json"
},
"columns": [
{ "data": "FirstName", "name": "Lela", "autoWidth": true },
{ "data": "Email", "name": "Email", "autoWidth": true },
{ "data": "Active", "name": "Status", "autoWidth": true },
{ "targets": -1, "data": "UserId", "defaultContent": "<button>Click!</button>", "autoWidth": true },
{ "data": "FirstName", "name": "Full name", "autoWidth": true }
]
});
Please note this column:
{ "targets": -1, "data": "UserId", "defaultContent": "<button>Click!</button>", "autoWidth": true }
I've followed their documentation on how to render an HTML element there... But what I need now and wasn't able to figure how do I actually set a certain attribute for this HTML element inside the datatable when its being generated...
As u can see I've set data source for the datatable as UserId, and now I'd like each button "Click" to have value whatever the value of UserId is...
Can someone help me out?
P.S. so I want to output an HTML element in that column whos structure would be something like this:
<button values="whatever the value of userId is..?">Click me event</button>
You would need to define the render property of the column for that which would be the following :
{
"targets": -1,
"data": "UserId",
"render": function (data, type, full, meta) {
return "<button id='"+ data +"'>Click!</button>";
},
"autoWidth": true
}
The data property will be containing UserId in it which can be used in the render function.
You can refer to the documentation of it here
I need to pass the Value of the first column into the second column render function() to make a hyperlink where the value of the first column is parameter. of the hyperlink.
"Columns": [
{
"data": "Code", "autoWidth": true,
},
{ "data" : "StyleReference","autoWidth": true,
"render": function (data, oObj) {
return '' + data + '';
}
}
]
Any Help Please!!
You're nearly there. The render function can take up to 4 variables. Your row represents the whole object, this should work:
"columns": [{
"data": "Code",
"autoWidth": true
}, {
"data": "StyleReference",
"autoWidth": true,
"render": function(data, type, row, meta) {
return '' + data + '';
}
}]
Hope that helps.