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.
Related
I have two tables in the same View/Page. I am using jquery datatable and to target both the table, I have used .display in both tables.
Question: Both the table has separate tableLength dropdown, How to target both using the top dropdown?
In Layman term, since both table has separate dropdown, both works properly for respective table. I want to use first table's dropdown and If I select 25, it should select 25 for the bottom dropdown and both the tables should show 25 records.
What I tried: I have made customized dropdown (orange box) which will call onChange event and will get the value and pass that value to Datatables "aLengthMenu" and "iDisplayLength" keys.
Below screenshot is taken from the UI I am working, can't paste the full picture. "Show 5 entries" is the LengthMenu.
`
<html>
.
.
<table class="display" id="tbl_result1">
</table>
<table class="display" id="tbl_result">
</table>
.
.
</html>
$('table.display').DataTable({
"aaSorting": [],
'aoColumnDefs': [{
'bSortable': false,
'aTargets': ['col-action']
}],
"zeroRecords": "No",
"language": {
"zeroRecords": " ",
"infoEmpty": " ",
"searchPlaceholder": "Search for an issue"
},
"aLengthMenu": [[5, 10, 25, -1], [5, 10, 25, "All"]], //LeftArray:value,rightArray: UI Dropdown
"iDisplayLength": 5, // By default rows
"searching": false,
"bStateSave": true,
"bPaginate": true, // true/false to enable/disable Pagination
"bInfo": false, // true/false to enable/disable the "Showing 1 of N records" message
"ordering": false, // true/false to enable/disable table sorting
'columnDefs': [{ // For disabling sorting in a particular table columns
'targets': [0], // column index (start from 0)
'orderable': false, // set orderable false for selected columns
}],
"fnStateSave": function (oSettings, oData) {
localStorage.setItem('offersDataTables', JSON.stringify(oData));
},
"fnStateLoad": function (oSettings) {
return JSON.parse(localStorage.getItem('offersDataTables'));
},
"dom": '<"pull-left"f><"pull-right"l>tip'
});
`
Tried calling onChange event listner and passing the value from customized dropdown, called a function that passes the value as an argument (let say variable is newLengthVal)to the Datatables like
`
"aLengthMenu": [[newLengthVal], [newLengthVal]], //LeftArray:value,rightArray: UI Dropdown
"iDisplayLength": newLengthVal, // By default rows
`
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'm trying to sort a table by a particular column with DataTables, but I receive this warning:
DataTables warning: table id=DataTables_Table_0 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
I put these scripts but maybe I'm doing something wrong:
jQuery('.sp-template-league-table table').DataTable({ paging: false, searching: false, info: false, retrieve: true });
jQuery('.sp-template-league-table table').DataTable().column('.data-tot').order('asc').draw();
You can see the table in this page: http://www.quartuleague.com/goldcup-2015-girone-gold/
under the "Fair Play" Tab, i want to sort table by "TOT"
If you want to sort the data by default you can also pass along additional parameters on the initialization instead of using .draw():
Example: Ascending sorting of the 4th column (indices start at 0)
$('#example_table').DataTable( {
"order": [[ 3, "asc" ]]
} );
In your case you need to add the column number of your data-tot column (8 or -1) like so:
jQuery('.sp-template-league-table table').DataTable({
order: [[ 8, "asc" ]],
paging: false,
searching: false,
info: false,
retrieve: true
});
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.
I like to use jQuery DataTable Plugin and want to create something like this-
And when anyone click on "Column visibility" button, they will see like this-
But I don't like to have Global search Button and Pagination on top (because I have already a pagination in the bottom).
I only want that button.
So, what I have done is -
$(document).ready(function()
{
var dataTable = $('#employee-grid').DataTable(
{
processing: true,
serverSide: true,
//ajax: "employee-grid-data.php", // json datasource for AJAX Data
"ajax":
{
"url": "employee-grid-data.php",
//"type": 'POST',
"data": function ( d ) //Sending Custom Data for manupulating with elements out of the table
{
d.myKey = "myValue";
// d.custom = $('#myInput').val();
// etc
},
},
//"pagingType": "full_numbers", //Adding Last and First in Pagination
stateSave: true,
"language":{ //Custom Message Setting
"lengthMenu": "Display _MENU_ records per page", //Customizing menu Text
"zeroRecords": "Nothing found - sorry", //Customizing zero record text - filtered
"info": "Showing page _PAGE_ of _PAGES_", //Customizing showing record no
"infoEmpty": "No records available", //Customizing zero record message - base
"infoFiltered": "(filtered from _MAX_ total records)" //Customizing filtered message
},
"lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], //For customizing number of data sets per page
dom: 'l<"toolbar">frtip Bfrtip', //"Bfrtip" is for column visiblity
initComplete: function() //Adding Custom button in Tools
{
$("div.toolbar").html('<button type="button" onclick="addNewEntry()">Add a New Record</button>');
},
buttons: [ //Column Visiblity Buttons
{
extend: 'colvis',
collectionLayout: 'fixed three-column',
postfixButtons: [ 'colvisRestore' ]
}
],
});
});
More Preciously-
dom: 'l<"toolbar">frtip Bfrtip',
buttons: [ //Column Visiblity Buttons
{
extend: 'colvis',
collectionLayout: 'fixed three-column',
postfixButtons: [ 'colvisRestore' ]
}
],
But I am finding something like this-
So, I want only Green Round and not Red Round.
What have I done wrong?
SOLUTION
Option dom can be a little confusing at first, but simply put, each letter in it is a DataTables feature. Also order of the letters describe their positioning on the page.
B - Buttons,
f - filtering input
r - processing display element
t - table
i - informational panel
p - pagination control
There are other letters and HTML markup supported. See dom option and Buttons - dom parameter
pages for more information.
Use the code below:
var dataTable = $('#employee-grid').DataTable({
// ... skipped ...
dom: 'Brtip',
buttons: [
{
extend: 'colvis',
collectionLayout: 'fixed three-column',
postfixButtons: [ 'colvisRestore' ]
}
]
});
DEMO
See this jsFiddle for code and demonstration.
You need to add dom option of dataTable while initializing as below:
$('#example').DataTable( {
"dom": '<"top"i>rt<"bottom"flp><"clear">'
});
You can see Source/Demo here
More Precise explanation