The documentation tells us the way we can use 'targets'
in columnDefs. But is there any way we can use it dynamically? For example, I have a global array (containing column numbers) which I update every time certain function is carried out on datatable. I want to render those columns in the global array in a particular fashion. I need to know if there is any way in which I could do this.
"columnDefs":[
{
"targets": hide_them,//name of the global array
"render": //some function
}
]
As per documentation Target of columnDefs in Datatable must use for below approach
0 or a positive integer column index counting from the left
$('#example').dataTable( {
"columnDefs": [ {
"targets": 0,
"searchable": false
} ]
} );
A negative integer such as column index counting from the right
$('#example').dataTable( {
"columnDefs": [ {
"targets": -0,
"searchable": false
} ]
} );
_all - A string - class name will be matched for all column as default work
$('#example').dataTable( {
"columnDefs": [ {
"targets": '_all',
"searchable": false
} ]
} );
Related
How can I hide the first column of my DataTable which contains indexes of my rows?
I already tried bSortClasses: false and orderClasses: false, but it didn't work.
Solved :
columnDefs: [
{ "visible": false, "targets": 0 }
],
I have used this script to sort my datatable and ignore text that I do not want to sort, I'll explain.
this is the column example:
10,836
↑(10.71%)
14,836
↑(13.71%)
I want to ignore this: ↑(10.71%) and to sort according to this: 10,836.
thats my script:
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"justNum-pre": a => parseFloat(a.replace(/\D/g, "")),
"justNum-asc": (a, b) => a - b,
"justNum-desc": (a, b) => b - a
});
$(document).ready(function () {
var table = $('#dataTable').DataTable({
order: [[ 1, "desc" ]],
scrollY: 200,
scrollX: false,
responsive: true,
paging: false,
//colReorder: true,
//pageLength: 100,
columns: [
{
"render": function(data, type, row){
return data.split(" ").join("<br/>");
}
},
null,
null,
null,
null,
null,
null
],
columnDefs: [
{ className: "all", "targets": [ 0, 1, 3, 6 ] },
{
type: 'justNum',
targets: 1
}
]
});
});
You can do this using the DataTables orderData feature.
For example, assume your formatted data is in the first column:
10,836
↑(10.71%)
Add a second column containing only the numeric portion (no text) 10836 and define it as a hidden column.
Then, create a columnDefs section in your datatable definition - something like this:
$('#demo').DataTable( {
"columnDefs": [
{ "orderData": [ 1 ], "targets": 0 },
{ "visible": false, "targets": 1 }
]
} );
} );
This says that the first column (target index 0) will use the data in the second column (target index 1) for sorting. And the second column will be a hidden column.
I have created a datatable with the following code
$(document).ready( function () {
$('#data-table').DataTable( {
"bFilter": false,
"scrollY": 300,
"scrollX": true,
"paging": false,
"ordering": false,
"info": false,
"columnDefs": [
{ "width": "20%", "targets": 0 }
]
});
} );
Note that I have the widths set to 20% for each of the columns. My question is how do I specify a width for column 1 while still being able to set a width for the rest of the columns?
I've seen examples like this on the datatable website:
$('#example').dataTable( {
"columns": [
{ "width": "20%" },
null,
null,
null,
null
]
} );
But I do not think this will work for me because it looks as if it would require me to know how many columns my table has in advance, and user requirements require the number of columns to be variable.
Try replacing your columnDefs part with this (and adding the appropriate percentages):
"columnDefs": [
{ "width": "(percentage)%", "targets": "_all" }
{ "width": "(other percentage)%", "targets": 0 }
]
This will set the first column to one width and the others to a different width.
Targets define which column will be affected. Setting it as an integer will affect the columns starting from left to right (i.e. '"targets": [0, 1]' would affect the leftmost and second-leftmost columns). Negative integers affect the columns from right to left. The string "_all" will affect all columns.
When using server-side processing on a DataTable, there is a mechanism to add an ID, class, or data-* attribute to the table row (<tr>) by including the DT_RowId, DT_RowClass or DT_RowData properties, respectively, to the JSON data for each row: https://datatables.net/examples/server_side/ids.html.
Is there a similar (or any) mechanism for adding additional markup to the table columns (<td>)?
You can add classes to columns like so, but not sure if this gets you where you want to go:
var all_data = data;
$("#example").DataTable({
"data": all_data,
"aoColumns": [{
"data": 'cat_code',
"className": "lang_body_2",//you can add whatever you want for a specific column here.
"visible": false
}, {
"data": 'value',
"searchable": false,
"width": "20%",
"className": "lang_body_2",
"title": ""
}]
})
Other way, from off. sites docs.
Assign class my_class to first column
$('#example').dataTable( {
"columnDefs": [
{ className: "my_class", "targets": [ 0 ] }
]
} );
I am using jQuery DataTables plugin to sort table data. I have four columns: Name, Position, Office and Age. What I want is user to be able to sort only Name and Age columns, not all the columns. But I am not able to stop sorting on OTHER columns. Can you please suggest something?
This code disable sorting, 0 - index of column.
For old version
aoColumnDefs: [
{
bSortable: false,
aTargets: [ 0 ]
}
]
for DataTables 1.10+
columnDefs: [
{ orderable: false, targets: 0 }
]
Especially for example, you need this
$(document).ready(function() {
$('#example').dataTable( {
"order": [[ 0, "desc" ]],
"aoColumns": [
null,
{ "bSortable": false },
{ "bSortable": false },
null
]
} );
} );
fiddle