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.
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 }
],
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
} ]
} );
I have a 4 columns DataTable that needs ordering, except for first column. I tried using "columns": [ {"orderable": false}, null, null, null ], but the first column shows the ordering icon (caret) on page load.
When I order another column, the icon disappear from first column, but there is still the space where it was, breaking the column width. Is there any way to REALLY disable the ordering, in a way that it also doesn't add any special padding?
SOLVED:
#ShaktiPhartiyal answer fixed the sorting problems. The width problem was fixed by setting the autowidth option to false and using a little CSS.
CSS part
table.dataTable thead tr th:first-child,
table.dataTable tbody tr td:first-child {
width: 0px;
}
DataTables options
$(table).DataTable({
"paging": false,
"columnDefs" : [
{ targets: 0, sortable: false},
],
"order": [[ 3, "asc" ]],
"autoWidth": false
});
Even if you disable sorting for a column, the dataTables sort order still remain. By default order is [0, 'asc']; simply set order to target the #2 column instead :
var table = $('#example').DataTable({
//....
order: [[ 1, "asc" ]] //column indexes is zero based
});
Working Fiddle
To disable ordering / sorting in datatables you can use the following parameter:
"aoColumns": [{ "bSortable": false }, null],
The code tells datatable to disable sorting in the first column.
I am creating jquery Datatable dynamically. ColumnNames and Rows Values are coming from Server side using Ajax call. Now, I need this datatable to be reinitialized everytime, so I used property "bDestroy": true, on every ajax call but after first display, DOM is getting broken. Here is my code
$('#JDatadt').dataTable({
"order": [],
"dom": "Bfrtip",
"buttons": ["csv", "excel", "pdf"],
"columnDefs": [{ "className": "dt-center", "orderable": false, "width": 20 }],
"bInfo": false,
"paging": true,
"processing": true,
"bDestroy": true,
"columns": dataObject[0].columns,
"data": dataObject[0].data
});
What is getting wrong here. Please help
Datatable by default try to sort column with index 0 if not specified.
if you don't want to sort by default with any column just add
"aaSorting": [[ ]] ,
you can destroy table by using fnDestroy() function of datatable. it will surely works for you.
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 ] }
]
} );