Hi Allan,
I used your code to sort programmatically on two columns but it sorts only the first time. It doesn't sort second time descending. Here's my code. Please help. Thank you.
I want the first column to always be sorted ascending regardless which other column is sorted on.
$(document).ready(function () {
var SortTable = $('#tblUploadHistory').dataTable();
SortTable.fnSortListener(document.getElementById('ValidatedDate'), 1);
$('#Overall').click(function () {
var ColumnSort = SortTable.fnSettings().aaSorting;
if (ColumnSort[0][0] != 2 || ColumnSort[0][1] == 'desc') {
SortTable.fnSort([[4, "asc"], [0, "asc"]]);
}
else {
SortTable.fnSort([[4, 'desc'], [0, 'asc']]);
}
});
});
function PopulateUploadDataTable(FacilityUploadItems) {
var Table = $('#tblUploadHistory').dataTable({
"sScrollY": "255px",
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"aaSorting": [[0, "desc"],
"aaData": FacilityUploadItems,
"aoColumns": [
{ "mDataProp": "Submitted Date", sClass: "tdData" },
{ "mDataProp": "Submitted By", sClass: "tdData" },
{ "mDataProp": "Validated Date", sClass: "tdData",
"mRender": function (data, type, full) {
return '<td>' + $.datepicker.formatDate('mm/dd/yy', new Date(data)) + '</td>';
}
},
{ "mDataProp": "Overall %", sClass: "tdData" },
{ "mDataProp": "Hourly +/-3%", sClass: "tdData" },
{ "mDataProp": "Category +/-3%", sClass: "tdData" },
{ "mDataProp": "CERTIFIED", sClass: "tdData" },
{ "mDataProp": "File Name", sClass: "tdData",
"mRender": function (data, type, full) {
return '<a href="TCIPdownload.aspx?name=' + data + '">' + data + '</a>';
}
}
,
{ "mDataProp": "Validated Date" }
],
"aoColumnDefs": [{ "bVisible": false, "aTargets": [8] },
{ "iDataSort": 8, "aTargets": [2]}],
"bDestroy": true
});
$('#tblUploadHistory').show();
$("#divUploads").show();
setTimeout(function () {
Table.css('width', '100%');
Table.fnAdjustColumnSizing();
}, 10);
}
<table id="tblUploadHistory" cellpadding="0" cellspacing="0" border="0" class="display">
<thead>
<tr>
<th id="thFacName" class="tdHeadingCenter" colspan="8">Facility Name</th>
</tr>
<tr>
<th class="tdSubHeading">Submitted Date</th>
<th class="tdSubHeading">Submitted By</th>
<th class="tdSubHeading" id="ValidatedDate">Validated Date</th>
<th class="tdSubHeading" id="Overall">Overall %</th>
<th class="tdSubHeading">Hourly +/- 3</th>
<th class="tdSubHeading">Category +/- 3%</th>
<th class="tdSubHeading">Certified</th>
<th class="tdSubHeading">File Uploaded</th>
<th class="tdSubHeading">SortValidatedDate</th>
</tr>
</thead>
Thank you very much for your help.
Best regards,
Ali
I used your code to sort programmatically on two columns but it sorts only the first time. It doesn't sort second time descending. Here's my code. Please help. Thank you.
I want the first column to always be sorted ascending regardless which other column is sorted on.
$(document).ready(function () {
var SortTable = $('#tblUploadHistory').dataTable();
SortTable.fnSortListener(document.getElementById('ValidatedDate'), 1);
$('#Overall').click(function () {
var ColumnSort = SortTable.fnSettings().aaSorting;
if (ColumnSort[0][0] != 2 || ColumnSort[0][1] == 'desc') {
SortTable.fnSort([[4, "asc"], [0, "asc"]]);
}
else {
SortTable.fnSort([[4, 'desc'], [0, 'asc']]);
}
});
});
function PopulateUploadDataTable(FacilityUploadItems) {
var Table = $('#tblUploadHistory').dataTable({
"sScrollY": "255px",
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"aaSorting": [[0, "desc"],
"aaData": FacilityUploadItems,
"aoColumns": [
{ "mDataProp": "Submitted Date", sClass: "tdData" },
{ "mDataProp": "Submitted By", sClass: "tdData" },
{ "mDataProp": "Validated Date", sClass: "tdData",
"mRender": function (data, type, full) {
return '<td>' + $.datepicker.formatDate('mm/dd/yy', new Date(data)) + '</td>';
}
},
{ "mDataProp": "Overall %", sClass: "tdData" },
{ "mDataProp": "Hourly +/-3%", sClass: "tdData" },
{ "mDataProp": "Category +/-3%", sClass: "tdData" },
{ "mDataProp": "CERTIFIED", sClass: "tdData" },
{ "mDataProp": "File Name", sClass: "tdData",
"mRender": function (data, type, full) {
return '<a href="TCIPdownload.aspx?name=' + data + '">' + data + '</a>';
}
}
,
{ "mDataProp": "Validated Date" }
],
"aoColumnDefs": [{ "bVisible": false, "aTargets": [8] },
{ "iDataSort": 8, "aTargets": [2]}],
"bDestroy": true
});
$('#tblUploadHistory').show();
$("#divUploads").show();
setTimeout(function () {
Table.css('width', '100%');
Table.fnAdjustColumnSizing();
}, 10);
}
<table id="tblUploadHistory" cellpadding="0" cellspacing="0" border="0" class="display">
<thead>
<tr>
<th id="thFacName" class="tdHeadingCenter" colspan="8">Facility Name</th>
</tr>
<tr>
<th class="tdSubHeading">Submitted Date</th>
<th class="tdSubHeading">Submitted By</th>
<th class="tdSubHeading" id="ValidatedDate">Validated Date</th>
<th class="tdSubHeading" id="Overall">Overall %</th>
<th class="tdSubHeading">Hourly +/- 3</th>
<th class="tdSubHeading">Category +/- 3%</th>
<th class="tdSubHeading">Certified</th>
<th class="tdSubHeading">File Uploaded</th>
<th class="tdSubHeading">SortValidatedDate</th>
</tr>
</thead>
Thank you very much for your help.
Best regards,
Ali