jQuery DataTables Ordering By 2 columns - javascript

I am using jQuery DataTables to style and give functionality to one of my tables:
My Goal
Order by whether or not the type of funding is active or not.. which is what it is doing currently as you can see. Now, I would like to order the Funding column alphabetically.. so my wanted outcome should be:
Funding One
Funding Two
Funding Three
Funding Four
Alpha
Beta
Charlie
Test
test2
Here is what I have so far my datatables script:
var codeFundingTable = $("#Code-Funding-Table").DataTable({
"bPaginate": false,
"bFilter": false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [2] },
{ "bSearchable": false, "aTargets": [2] }
],
"columns": [
{ "orderData": [1] },
{ "orderData": [0] }
]
});
So I am first ordering by column 1 (Active, 0-based) then by column 0 (Funding) but it is not doing it alphabetically.
How can I make this happen?

It is a guess since we have no sample data. For example, what is the value of "active" (besides a checkbox is rendered)? But I believe you can just do
var table = $('#example').DataTable({
order: [[1, 'asc'], [0, 'asc']]
})
active column is sorted first, if values is 0 and 1 asc should be used
first column is secondly sorted alpha, with respect of second column order
Here is a demo -> http://jsfiddle.net/0f9Ljfjr/949/ position is sorted first, then name is sorted within each position "type".

Try this on for size
"columns": [
{ "orderData": [1,0] },
https://datatables.net/examples/basic_init/multi_col_sort.html

In my case, what helped me is this.
I used data-order attribute to sort my tables.
data-order="[[ 0, "asc" ], [ 1, "asc" ]]

Related

DataTable Sorting empty column

I have created a data table and sorting it according to ASC order, which is working fine. I have an integer value in the column:
Here is my code.
var salaryType = $.fn.dataTable.absoluteOrderNumber([
'TBC',
{ value: 'N/A', position: 'bottom' }
]);
jQuery('#dtTable').DataTable({
"columnDefs": [
{ "type": salaryType, "targets": 2 }
],
"aaSorting": [[2, "asc"]],
});
Now, Few rows are empty in column 2, and the data table is showing NaN.
Is there any way to show N/A instead of NAN with keeping integer field?

Sorting column with checkboxes

I have a table that I am using jQuery Datatable for.
var myTable = $("#My-Table").DataTable({
"order": [2, "asc"],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [3] },
{ "bSearchable": false, "aTargets": [2, 3] }
]
});
Now, the column that I am trying to perform ordering on is a column that contains checkboxes, so on page load I am setting a data attribute for that td element and then ordering by that attribute. The attribute will either be 0 or 1.
#(if item.Active)
{
<td class="active-td" data-order="0">
#Html.DisplayFor(modelItem => item.Active)
</td>
}
else
{
<td class="active-td" data-order="1">
#Html.DisplayFor(modelItem => item.Active)
</td>
}
Now, the user has the ability to deactivate or activate records.. and when they do, I am changing the data-order appropriately... but when I call draw, it is not putting the rows that contain unchecked td elements at the bottom and rows that contain checked td elements at the top like it does on page load.
Here is my jQuery for when a user wants to deactivate.
var td = row.children('td.active-td').attr("data-order", 1); // changing td data attribute accordingly
myTable.cell(myTable.row(row), 2, {order: 'current'})
.data("<input disabled='disabled' class='check-box' type='checkbox' />")
.draw();
The .draw() is not reordering the table like it does on page load.
How do I accomplish this?
Here is what it looks like when I deactive someone:
I want that row to be ordered so that checked checkboxes be at the top, and the unchecked at the bottom.
UPDATE
<script src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/custom-data-source/dom-checkbox.js"></script>
var myTable = $("#My-Table").DataTable({
"columnDefs":[
{
"targets": 2,
"orderDataType": "dom-checkbox"
}],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [3] },
{ "bSearchable": false, "aTargets": [2, 3] }
]
});
Avoid using data- attributes for ordering dynamic data, they are good only for static data.
Use dom-checkbox plug-in that allows to sort based on the checked state of checkboxes in a column.
Include appropriate plug-in JS file and use orderDataType option for the column containing checkboxes.
For example:
var myTable = $("#My-Table").DataTable({
// ... skipped ...
"columnDefs": [
{
"targets": 0,
"orderDataType": "dom-checkbox"
}
]
});
See this example for code and demonstration.

Datatables Multi Column Sorting

Is there anyway with DataTables to preform a multi-column sort where the secondary column is always sorted DSC irrespective to what sorting direction the primary column is sorted.
{
targets: [ 0 ],
orderData: [ 0, 12 ] //Column 12 needs to always be sorted DSC
}
You could just use orderFixed for sorting like this
$(document).ready( function () {
var table = $('#example').DataTable({
columnDefs: [{
targets: [ 0 ],
orderData: [ 0, 12 ]
}],
orderFixed: [[ 12, "desc" ]]
});
} );
Hope this helps.

Data tables - Block sorting for column

I am using Data Tables Jquery Plugin. Can anyone help me stopping the table from sorting the first and second columns?
I need the user to be able to click on the other columns and sort them, but when I do it, the first two columns also sort. Can these values be locked and never sort? (I need them static)
For those of you looking to prevent sorting on columns but still allow them to sort when other columns are sorted:
$('#table').dataTable({
// Disable sorting on the first two columns
"aoColumnDefs" : [ {
'bSortable' : false,
'aTargets' : [ 0,1 ]
} ]
});
Or alternatively you can target a class like so:
// Disable sorting based on class
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ "disableSort" ]
} ]
Apply the class to the table header not the row.
For the OP, how to make the columns completely static in order to maintain some sort of ranking / index feature every time a column is clicked:
$(document).ready(function() {
$('#example').dataTable( {
"fnDrawCallback": function ( oSettings ) {
/* Need to redo the counters if filtered or sorted */
if ( oSettings.bSorted || oSettings.bFiltered )
{
for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
{
$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
}
}
},
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[ 1, 'asc' ]]
} );
} );

Disable Sorting on every column except the first one

i'm currently using Datatables for a Custom system and i would like to disable Sort for every column but the first one.
I tried with the following code wich is working fine when i add values separated by comma
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 1, 2, 3, 4 ] }
],
But my tables column number vary for each individual file so i can have 3 or maybe 12 columns, and i don't want to have to manually add the values for each file.
If i add more values than the columns i have in one file i get the following error, and an execution stop
Uncaught TypeError: Cannot read property 'className' of undefined
So, is there any way i can get those index and pass them to the function?
Thanks!
You can add a specific class to the TH element that you do not want to be sortable.
<table>
<thead>
<th>
...
</th>
<th class="no-sort">
...
</th>
</thead>
<tbody>
...
</tbody>
</table>
And then you can specify this class in your aTargets parameter.
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': ['no-sort'] }
]
View here for more information on the Column specific options.
And then you can specify this class in your aTargets parameter.
columnDefs: [ { orderable: false, targets: [1,2,3,4,5,6,7,8,9] } ]
This worked for me and seems more practical (though not exactly elegant)
columnDefs: [
{
"targets": [0],
"orderable": true
}, {
"targets": [''],
"orderable": false
}
]

Categories