Develop Reference

Pass Parameters through ajax call - ajax url

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

Datatables, Setting a link with URL variable from desired column retreived from json

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+' ';
}
},

JQuery Datatables not load immediately/disable autolaod

I am using JQuery Datatables 1.10.15 I would like to search first before loading the data because i have 300,000+ rows, maybe something like
if (table not loaded) {
(load the table)
}
else {
(Search)
}
or any other ways, please help me
this is my code:
var mytable = $('#myDatatable').DataTable({
"ajax": {
"url": '/Home/GetAllRecords',
"type": "POST",
"datatype": "json",
"data": (records)
},
"columns": [
{ "data": "id", "autoWidth": true },
{ "data": "name", "autoWidth": true }
]
});
$('#btnSearch').on("click", function () {
mytable.ajax.reload();
});

Javascript dataTable - Adding link to table

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.

Cannot read property '_aData' of undefined(…) - Datatables

I'm trying to read data() from a cell in a datatable which has a button inside it, but I'm getting en error.
This is my Datatable definition:
$("#example").DataTable({
destroy: true,
"columnDefs": [{
orderable: false,
targets: 0
}],
"columns": [
{
"data": "slno",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html('' + oData.slno + '');
},
},
{ "data": "status_message" },
{ "data": "crm_services_id" },
{ "data": "subject_id" },
{ "data": "severity_id" },
{"data": "user_id" },
{ "data": "status_id" },
{
"data": "caller_number",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html('<button class="btn btn-primary" id= "' + oData.subjectID + '">Call Customer</button>');
},
}
],
select: {
style: 'os',
selector: 'td:first-child'
},
"data": response,
"sDom": '<"top">tip'
});
And here is where I'm trying to fetch the data:
var table = $("#example").DataTable();
$('#example tbody').on('click', 'button', function () {
var subjectID = $(this).attr('id');
var thisData = table.row($(this).parents('tr')).data();
var userID = thisData[7];
sendCallRequest(subjectID, userID);
});
Here is the error I'm getting:
Cannot read property '_aData' of undefined(…)
Any suggestions please?

Try unbinding the event for your buttons before you re-assign them:
var table = $("#example").DataTable();
$('#example tbody').off('click');
$('#example tbody').on('click', 'button', function () {
var subjectID = $(this).attr('id');
var thisData = table.row($(this).parents('tr')).data();
var userID = thisData[7];
sendCallRequest(subjectID, userID);
});
Why am I suggesting this: I have a pretty similar problem, where DataTables is not able to call the rowReorder event. I also create my table via AJAX / dynamically (which you seem to do aswell), so obviously my event listener (in my case for table.on('row-reorder')) was bound multiple times. After first removing the event listener and readding it, finally I got this to work.