Reputation: 45
I have a table and it has 8 columns. Suppose their headers viz 'A', 'B'..... 'H'.
I want to apply multi-column sorting like:
Default view: Case1: If user clicks on 'A' then sorts the column as 'A' (desc) - > 'B' (asc) - >'E' (asc) - >.... - > 'H' (asc)
And if user again clicks on 'A' then nothing should happen.
Case 2: If user clicks on 'E' then sorts the column as 'E' (asc) - > 'A' (desc) - > 'B' (asc) - >'F' (asc) - >.... - > 'H' (asc)
And if user again clicks on 'E' then nothing should happen.
Case 3: If user clicks on 'F' then sorts the column as 'F' (asc) - >'A' (desc) - > 'B' (asc) - >'E' (asc) - >.... - > 'H' (asc)
And if user again clicks on 'F' then nothing should happen.
please look at the code what I have done
$(document).ready(function() {
window.history.pushState("object or string", "EPAP|AuctionList", contextPath+"/auctions/auctionlist");
languageList.sEmptyTable = '<spring:message code="auctionlist.emptytable"/>';
auctionTable = $('#datatable').DataTable({
language: languageList,
order: [[0, 'desc']],
columnDefs: [
{targets: 0, orderSequence: ['desc']},
{targets: 1, orderSequence: ['asc']},
{targets: 4, orderSequence: ['asc']},
{targets: 5, orderSequence: ['asc']},
{targets: 6, orderSequence: ['asc']},
{targets: 7, orderSequence: ['asc']},
{type: "datetime-moment",targets: 5}
],
initComplete: function () {
$('#datatable th').on('click', function (event) {
var auctionTable = $('#datatable').DataTable();
var th = $(this).closest('th');
var colIndex = auctionTable.column( th ).index();
console.log(colIndex);
if (colIndex === 0) {
console.log('order col 0 ')
auctionTable.order([[0, 'desc'], [1, 'asc'], [4, 'asc'], [5, 'asc'],[6, 'asc'],[7, 'asc']]).draw();
}else if (colIndex === 4) {
console.log('order col 4 ')
auctionTable.order([[4, 'asc'],[0, 'desc'], [1, 'asc'], [5, 'asc'],[6, 'asc'],[7, 'asc']]).draw();
}else if (colIndex === 5) {
console.log('order col 5 ')
auctionTable.order([[5, 'asc'],[0, 'desc'], [1, 'asc'],[4, 'asc'] ,[6, 'asc'],[7, 'asc']]).draw();
}else if (colIndex === 6) {
console.log('order col6 ')
auctionTable.order([[6, 'asc'],[0, 'desc'], [1, 'asc'], [5, 'asc'],[4, 'asc'],[7, 'asc']]).draw();
}else if (colIndex ===7) {
console.log('order col 7')
auctionTable.order([[7, 'asc'],[0, 'desc'], [1, 'asc'], [5, 'asc'],[4, 'asc'],[6, 'asc']]).draw();
}
});
},
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 2,3,8 ] }
] ,
"ajax": {
"url": (contextPath + "/auctions/dailyAuctionViewList"),
"cache": false,
"asyc":false,
"dataSrc": ""
},
What I want?:
First 0 index column sorts then 1 index and so on
But the columns in the output image are not correctly sorts.
Note: Brief description at https://s.docworkspace.com/docs/3Hj58r9qB Please help me out as it's my first day on data tables.
Thanks in advance
Upvotes: 0
Views: 639
Reputation: 45
I had found the solution:
$(document).ready(function() {
var auctionTable = $('#datatable').DataTable({
order:[[0, 'desc']],
columnDefs: [
{targets: 0, orderSequence: ['desc']},
{targets: 1, orderSequence: ['asc']},
{targets: 4, orderSequence: ['asc']},
{targets: 5, orderSequence: ['asc']},
{targets: 6, orderSequence: ['asc']},
{targets: 7, orderSequence: ['asc']},
{orderable: false, targets:[1,2,3,8]}
]
}); });
Upvotes: 1