如何在 JQuery 数据表中对列进行独立排序

问题描述 投票:0回答:0

当我们点击任何列标题时,数据将按升序或降序方式排序,同时对其他列的数据进行排序,这是数据表的默认功能。 但我希望根据单个列对数据进行排序。

如何对列进行独立排序?我有一个表,其列没有关系。是否可以在不更改其他列顺序的情况下对一列进行排序?

我试过这个但是它完全禁用了DataTable的排序功能:

var table = $('#myTable').DataTable({
    ordering: false
});

我只想启用排序功能,但独立于 JQuery DataTables 的每一列。

我的表中有 3 列:在读学生、缺席学生和迟到学生。每列都有 colspan="2" 男性和女性。他们显然彼此之间没有任何关系。如果我为每个在校学生男、在校学生女、缺席学生男、缺席学生女、迟到的男学生和迟到的女学生创建单独的表。需要 6 张桌子。我想将它们压缩在一个表中,然后仍然独立地对它们进行排序。谢谢

我的完整代码:

function enable_sort(element){
  let emptyType = $.fn.dataTable.absoluteOrder( {
    value: '', position: 'bottom'
  } );

  setTimeout(()=>{
    $(document).ready(function() {
      // initialize DataTable with options
      $('#' + element).DataTable({
        paging: true,
        autoWidth: true,
        dom: '<"d-flex flex-wrap justify-content-between align-items-center mb-3"lfB>rtip',
        buttons: [
          { extend: 'copyHtml5', className: 'btn btn-secondary rounded-pill mr-2 mb-2 mb-md-0' },
          { extend: 'excelHtml5', className: 'btn btn-secondary rounded-pill mr-2 mb-2 mb-md-0' },
          { extend: 'pdfHtml5', className: 'btn btn-secondary rounded-pill mr-2 mb-2 mb-md-0' },
          { extend: 'print', className: 'btn btn-secondary rounded-pill mr-2 mb-2 mb-md-0' }
        ],
        lengthMenu: [
          [10, 25, 50, 100, -1],
          ['10', '25', '50', '100', 'All']
        ],
        responsive: true,
        language: {
          paginate: {
            first: '',
            last: '',
            previous: '<i class="fas fa-angle-left"></i>',
            next: '<i class="fas fa-angle-right"></i>'
          }
        },
        columnDefs: [{
          targets: 0,
          type: emptyType
        }]
      });
    });

    const tableCells = document.querySelectorAll('table td, table th, table tr');
    tableCells.forEach(cell => {
      cell.style.textAlign = 'center';
      cell.style.verticalAlign = 'middle';
    });
    
  }, 1000);
}
javascript jquery datatables
© www.soinside.com 2019 - 2024. All rights reserved.