3

我需要在帐户交易表上设置多列排序。我决定使用 jQuery DataTables。每当我单击列标题对该列（例如列 x）进行排序时，我希望它按列 3 对列 x 中的任何匹配项进行排序。如果我单击第 3 列，那么当第 3 列中有匹配项时，它应该按第 0 列排序。

我见过fnSortListener和fnSort，看起来我可以通过将它们附加到每一列来实现我的目标......但这似乎真的是多余的，因为除了第 3 列之外，每一列都需要在第 3 列上进行二次排序。

那么，有没有办法告诉 DataTables 总是对第 3 列进行二次排序，然后为第 3 列指定异常？

任何帮助表示赞赏。我对这个插件很陌生。谢谢！

编辑

这就是我最终要解决的问题。第一个二维数组表示如何在第一次点击时排序，第二个二维数组表示如何在第二次点击时排序。

var Sorter = function($dataTable) {
  return {
    bindMultiSort: function(headerSelector, firstOrderTuples, secondOrderTuples) {
      var order = 0;
      this.removeSorting(headerSelector).click(function() {
        if (order === 0) {
          $dataTable.fnSort(firstOrderTuples);
          order = 1;
        } else {
          $dataTable.fnSort(secondOrderTuples);
          order = 0;
        }   
      }); 
    },  

    removeSorting: function(headerSelector) {
      var $header = $(headerSelector);
      $header.unbind('click');

      return $header;
    }   
  };  
};

  function attachSecondarySorting($transactionsTable) {
      var sorter = new Sorter($transactionsTable);
      sorter.bindMultiSort('#posted', [[POSTED_DATE_COL, "asc"], [DESCRIPTION_COL, "asc"]], [[POSTED_DATE_COL, "desc"], [DESCRIPTION_COL, "asc"]]);
      sorter.bindMultiSort('#received', [[RECEIVED_DATE_COL, 'asc'], [DESCRIPTION_COL, 'asc']], [[RECEIVED_DATE_COL, 'desc'], [DESCRIPTION_COL, 'asc']]);
      sorter.bindMultiSort('#category', [[TRANSACTION_TYPE_COL, 'asc'], [POSTED_DATE_COL, 'desc'], [DESCRIPTION_COL, 'asc']], [[TRANSACTION_TYPE_COL, 'desc'],
      sorter.bindMultiSort('#description', [[DESCRIPTION_COL, 'asc'], [POSTED_DATE_COL, 'desc']], [[DESCRIPTION_COL, 'desc'], [POSTED_DATE_COL, 'desc']]);    
      sorter.bindMultiSort('#moneyIn', [[MONEY_IN_COL, 'asc'], [DESCRIPTION_COL, 'asc']], [[MONEY_IN_COL, 'desc'], [DESCRIPTION_COL, 'asc']]);
      sorter.bindMultiSort('#moneyOut', [[MONEY_OUT_COL, 'asc'], [DESCRIPTION_COL, 'asc']], [[MONEY_OUT_COL, 'desc'], [DESCRIPTION_COL, 'asc']]);      
  }
4

1 回答 1

1

aDataSort虽然我认为您可以通过组合 the和column 属性来完成您想要做的事情asSorting，但它们确实有它们的冗余，并且可能无法提供您需要的完全控制。

最少冗余的解决方案将是类似于以下代码的解决方案：

var theDataTable = $('#tableId').dataTable();  // with whatever options needed, of course

// unbind the default click event that is in place for sorting
// and replace it with your own calls to fnSort
$('#tableId thead th').unbind('click').click(function(){
    var aaSorting = oTable.fnSettings().aaSorting;
    var currentSortColumnIndex = aaSorting[0][0];
    var currentSortDirection = aaSorting[0][1];
    var clickedSortColumnIndex = $(this).index();

    var newSortDirection = 'asc';
    if(currentSortColumnIndex == clickedSortColumnIndex) {
        newSortDirection = (currentSortDirection == 'asc') ? 'desc' : 'asc';
    }

    if(clickedSortColumnIndex == 3) {
        oTable.fnSort( [ [3, newSortDirection], [0, newSortDirection] ] );
    }
    else {
        oTable.fnSort( [ [clickedSortColumnIndex, newSortDirection], [3, newSortDirection] ] );
    }
});

如果我正确地解释了您的排序意图，那么这应该可以解决问题，但如果不是，我认为这将为您提供所需的解决方案。

注意：另请参阅datatables.net上标题为“多列排序”的论坛讨论

于 2012-05-26T03:39:24.297 回答