DataTable Sorting empty column - javascript

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?

Related

jQuery dataTables wrong sorting

I have a problem with jQuery dataTable sorting. It sorts columns in wrong order. For example: I have numbers from 1 to 5, when I click to sort that column it sorts in random order: 4, 1, 3, 5, 2. It's not only with number type. String, date - same problem. I have my data in MySQL database and I get it in json format. My datatable code:
var dataTable = $('#user_data').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"data_control/orders/fetch.php",
type:"POST"
},
"drawCallback": function( settings ) {
paint();
},
columnDefs: [
{
"orderable": false,
targets: [11, 12, 13, 14]
}
]
});
As I already mentioned - I select my data from database in fetch.php file in JSON format. Any ideas how to solve my problem with sorting?
Thanks!

Populate a datatable starting from the second column

I have a datatable that retrieves json data from an api. The first column of the table should only contain a checkbox. However, when retrieving the data it populates the first column as well.
$.getJSON('https://api.myjson.com/bins/o44x', function(json) {
$('#parametrictable').DataTable({
data : json.data,
columns : json.columns,
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]]
})
});
Is there any way that I can set that the data should only populate starting from the second column, leaving the first column to only contain the checkbox?
You can fix this issue by updating the api or in your js code just updating the data key value to null for first object in the json.columns array like:
$.getJSON('https://api.myjson.com/bins/o44x', function(json) {
json.columns[0].data = null;
json.columns[0].defaultContent = '';
$('#parametrictable').DataTable({
data: json.data,
columns: json.columns,
.... your rest of code
})
});
EDIT:
I meant what your suggestion only did was hide the data that was overlapping with the checkbox. I don't want it hidden. I want the first column to be, by default, only checkboxes. and the overlapping data should be on the 2nd column.
You can update your API like this to achieve that:
"columns": [
{
"data": null,
"defaultContent": ""
},
{
"data": "DT_RowId",
"title": "Id"
},
{
"data": "supplier",
"title": "supplier"
},
{
"data": "color",
"title": "color"
}
],
Or, you can update your code without modifying your API like:
$.getJSON('https://api.myjson.com/bins/o44x', function(json) {
// Add object for checkbox at first position
json.columns.unshift({"data": null, "defaultContent": ""});
$('#parametrictable').DataTable({
data: json.data,
columns: json.columns,
....your rest of code
})
});

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.

jQuery DataTables Ordering By 2 columns

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" ]]

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.

Categories