Develop Reference

DataTables How To get the value at clicked row and 1st column?

I am trying to create an edit button for all rows, therefore I need the ID of the row (which is in the 0th column). How can I get that?
Pseudocode:
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<a type='button' name='edit' class='editbutton' href='vykresy/edit/'.[DATA of first colum and current row here]>Edit</a>"
} ],
Any idea would be appreciated.

I would suggest using a custom render function, then you can use the 'full' argument to access any property of the row.
"columnDefs": [ {
"targets": -1,
"data": null,
"render": function (data, type, full, meta){
return "<a type='button' name='edit' class='editbutton' href='vykresy/edit/" + full.ID + "'>Edit</a>";
}
} ],

JQuery Datatables Properties

I am working on a web project, where I have used JQuery Datatables in the project, the only challenge that I am facing with is, how to get or access datatable's properties and vlues like: search value, order, limit, ... using JavaScript and JQuery.
Thanks in advance.
Some Code I have Used:
function loadDestroyedGoods() {
var start_date = $("#start_date").val();
var end_date = $("#end_date").val();
if (start_date && end_date) {
var dataTable = $('.g_tbl').DataTable({
"processing": true,
"serverSide": true,
"destroy": true,
"lengthChange": true,
"lengthMenu": [20, 50, 100, 500, 1000],
"pageLength": 10,
"ajax": {
"url": "/loadGoodsDestroyed",
"type": "POST",
"dataType": "json",
"dataSrc": "data",
"data": {start_date: start_date, end_date: end_date}
},
"columns": [
{"data": "name"},
{"data": "status"},
{"data": "count"},
{"data": "price"},
{"data": "consumer"},
{"data": "date"}
]
});
}
}
This is what I want:
What I want is how to get data-tables' properties, not how to load custom data into it. I don't need server side engagement here, all I want is how to get the value which user entered for the search, the order user used to order the rows

you can add following line to your javascript to extract global search filter value. (if you are using same table that you linked, not changed any id of table).
here is code for search field on that page:
below query looks for example filter id in your page which is div id, inside that it looks for label tag, in it there is input type="search" , so i used below which extract the value of that search field.
$("#example_filter > label > input").val();
here is proof of its work :
and you can get sorting column name and index (it includes default sort on page load also) using this script :
$(document).ready(function (){
var table = $('#example').DataTable();
$("#example").dataTable().bind('click', function () {
var order = table.order();
alert( 'Table is ordered by column: '+order[0][0]+', direction:' + order[0][1]);
var title = table.column(order[0][0]).header();
alert( 'Ordering column title: '+$(title).html() );
});
var order = table.order();
alert( 'Table is ordered by column: '+order[0][0]+', direction:' + order[0][1]);
var title = table.column(order[0][0]).header();
alert( 'Ordering column title: '+$(title).html() );
});

How to make Jquery DataTable Column as HyperLink or ActionLink with other column value?

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.

Datatables - dynamic columns

I understand that this question has been asked before, but my variation does not match the other answers.
I have a json data source in this form :
{
"columns":[
{"title":"Store Number","data":"StoreNbr"},
{"title":"Store Name","data":"StoreName"},
{"title":"2016-01-01","data":"2016-01-01"},
{"title":"2016-01-02","data":"2016-01-02"}
],
"data":[
{"2016-01-01":"51","StoreNbr":"1","StoreName":"Store 1","2016-01-02":"52"}
]
}
I am loading the data like this :
$("#datatable").DataTable({
"ajax": {
"url": "http://myjsonurl-that-produces-above-response",
"dataSrc": "data"
},
"columns": [
{"title":"Store Number","data":"StoreNbr"},
{"title":"Store Name","data":"StoreName"},
{"title":"2016-01-01","data":"2016-01-01"},
{"title":"2016-01-02","data":"2016-01-02"},
],
dom: "Bfrtip",
"bProcessing": true,
"bServerSide" : true
});
The above works flawlessly. What I need, is to load the columns dynamically, like this :
"columns": $.getJSON($('#datatable').DataTable().ajax.url(),
function(json){
return (JSON.stringify(json.columns));
});
All I get is a aDataSource error.
If I run the .getJSON thing anywhere else in the code I get the expected response, the one I need. Any ideas?
I would like to make this to work as it is preferably as my datasource keeps changing based on filters I apply that affect the json source, dataset etc.
Update :
The way the table is initialized :
<script type="text/javascript">
TableManageButtons.init();
TableManageButtons = function () {"use strict"; return { init: function () { handleDataTableButtons() } }}();
var handleDataTableButtons = function () {
"use strict";
0 !== $("#datatable-buttons").length && $("#datatable-buttons").DataTable({
"ajax": {
"url": "http://myjsonurl.php",
.......

Try to get the columns first and then proceed with datatables initialization:
$.getJSON('url/for/colums', function(columnsData) {
$("#datatable").DataTable({
...
"columns": columnsData
});
});
EDIT
If I understand correctly, you want to do this:
$("#datatable").DataTable({
"ajax": {
"url": "http://myjsonurl-that-produces-above-response",
"dataSrc": "data"
},
"columns": getColumns(), //Execute $.getJSON --> asynchronous (the code continous executing without the columns result)
dom: "Bfrtip",
"bProcessing": true,
"bServerSide" : true
});
In this way, when you call getColumns() the execution is asynchronous, so the columns are going to be undefined.
That's why you have to call the DataTable initializer in the getJSON callback function.
Another way might be to get the columns in a not asynchronous function setting async: false (Check this question)

You can form a custom js function to put your headers in place once you get the response from server. Have a look into below code:
JSON response from server:
{
"columns": [
[ "Name" ],
[ "Position" ],
[ "Office" ],
[ "Extn." ],
[ "Start date" ],
[ "Salary" ]
],
"data": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],....
}
And js method to process it to put headers on place:
$( document ).ready( function( $ ) {
$.ajax({
"url": 'arrays_short.txt',
"success": function(json) {
var tableHeaders;
$.each(json.columns, function(i, val){
tableHeaders += "<th>" + val + "</th>";
});
$("#tableDiv").empty();
$("#tableDiv").append('<table id="displayTable" class="display" cellspacing="0" width="100%"><thead><tr>' + tableHeaders + '</tr></thead></table>');
//$("#tableDiv").find("table thead tr").append(tableHeaders);
$('#displayTable').dataTable(json);
},
"dataType": "json"
});
});
Check this url for more clarification.
Hope this helps!!

JQuery Datatables : Cannot read property 'aDataSort' of undefined

I created this fiddle to and it works well as per my requirements: Fiddle
However, when I use the same in my application I get an error in the browser console saying Cannot read property 'aDataSort' of undefined
In my application, the javascript reads something like as below: I have checked the controller output...it works well and is printed on the console too.
$(document).ready(function() {
$.getJSON("three.htm", function(data) {
// console.log("loadDataTable >> "+JSON.stringify(data));
})
.fail(function( jqxhr, textStatus, error ) {
var err = textStatus + ', ' + error;
alert(err);
console.log( "Request Failed: " + err);
})
.success(function(data){
loadDataTable(data);
});
function loadDataTable(data){
$("#recentSubscribers").dataTable().fnDestroy();
var oTable = $('#recentSubscribers').dataTable({
"aaData" : JSON.parse(data.subscribers),
"processing": true,
"bPaginate": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"aoColumnDefs": [{
"sTitle": "Subscriber ID",
"aTargets": [0]
}, {
"sTitle": "Install Location",
"aTargets": [1]
}, {
"sTitle": "Subscriber Name",
"aTargets": [2]
}, {
"aTargets": [0],
"mRender": function (data, type, full) {
return '<a style="text-decoration:none;" href="#" class="abc">' + data + '</a>';
}
}],
"aoColumns": [{
"mData": "code"
}, {
"mData": "acctNum"
}, {
"mData": "name"
}]
});
}
})

It's important that your THEAD not be empty in table.As dataTable requires you to specify the number of columns of the expected data .
As per your data it should be
<table id="datatable">
<thead>
<tr>
<th>Subscriber ID</th>
<th>Install Location</th>
<th>Subscriber Name</th>
<th>some data</th>
</tr>
</thead>
</table>

Also had this issue,
This array was out of range:
order: [1, 'asc'],

For me, the bug was in DataTables itself; The code for sorting in DataTables 1.10.9 will not check for bounds; thus if you use something like
order: [[1, 'asc']]
with an empty table, there is no row idx 1 -> this exception ensures.
This happened as the data for the table was being fetched asynchronously. Initially, on page loading the dataTable gets initialized without data. It should be updated later as soon as the result data is fetched.
My solution:
// add within function _fnStringToCss( s ) in datatables.js
// directly after this line
// srcCol = nestedSort[i][0];
if(srcCol >= aoColumns.length) {
continue;
}
// this line follows:
// aDataSort = aoColumns[ srcCol ].aDataSort;

I faced the same problem, the following changes solved my problem.
$(document).ready(function() {
$('.datatable').dataTable( {
bSort: false,
aoColumns: [ { sWidth: "45%" }, { sWidth: "45%" }, { sWidth: "10%", bSearchable: false, bSortable: false } ],
"scrollY": "200px",
"scrollCollapse": true,
"info": true,
"paging": true
} );
} );
the aoColumns array describes the width of each column and its sortable properties.
Another thing to mention this error will also appear when you order by a column
number that does not exist.

In my case I had
$(`#my_table`).empty();
Where it should have been
$(`#my_table tbody`).empty();
Note: in my case I had to empty the table since i had data that I wanted gone before inserting new data.
Just thought of sharing where it "might" help someone in the future!

In my case I solved the problem by establishing a valid column number when applying the order property inside the script where you configure the data table.
var table = $('#mytable').DataTable({
.
.
.
order: [[ 1, "desc" ]],

You need to switch single quotes ['] to double quotes ["] because of parse
if you are using data-order attribute on the table then use it like this data-order='[[1, "asc"]]'

Most of the time it occurs when something is undefined. I copied the code and removed few columns which disturbed the order by index. Carefully make changes and every variable after it.
"order": [[1, "desc"]], fixed my issues previous i was using "order": [[24, "desc"]], and that index was not avaialble.

I had this problem and it was because another script was deleting all of the tables and recreating them, but my table wasn't being recreated. I spent ages on this issue before I noticed that my table wasn't even visible on the page. Can you see your table before you initialize DataTables?
Essentially, the other script was doing:
let tables = $("table");
for (let i = 0; i < tables.length; i++) {
const table = tables[i];
if ($.fn.DataTable.isDataTable(table)) {
$(table).DataTable().destroy(remove);
$(table).empty();
}
}
And it should have been doing:
let tables = $("table.some-class-only");
... the rest ...

I got the error by having multiple tables on the page and trying to initialize them all at once like this:
$('table').DataTable();
After a lot of trial and error, I initialized them separately and the error went away:
$("#table1-id").DataTable();
$("#table2-id").DataTable();

My Solution
add this :
order: 1 ,

For me
adding columns in this format
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'state_date' },
{ data: 'office' },
{ data: 'extn' }
]
and ajax at this format
ajax: {
url: '/api/foo',
dataSrc: ''
},
solved for me .

Old question, but in my case I was passing an unrelated order= in the URL that would sometimes be empty. Once I changed the url variable to "sortorder" or anything other than "order" the plugin began working normally.

I got the same error, In my case one of the columns was not receiving proper data. some of the columns had strings in place of Integers. after i fixed it it started working properly. In most of the cases the issue is "table not receiveing proper data".

Just my two cents regarding order: [...];
It won't check items type, and in my case I was passing [arrOrders] as opposed to just arrOrders or [...arrOrders], resulting in [[[ 1, "desc" ], [ 2, "desc" ]]].