使不可显示的数据显示在 table 的底部

Question

目标：
当您使用 ASC 或 DESC 时，任何不包含任何数据（null 或 whitepsace）的单元格都应始终位于 table 的底部。它应该发生在特定列上，其余列不应受到影响。具体列为'Name'

问题：
我不知道该怎么做，是否可以针对此 Cloudtables 进行？

Jsbin:
https://jsbin.com/jacewudaji/edit?html,outpout

谢谢！

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js"></script>

 

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>  
  
  
<script>
  
var data = [
    [
        null,
        "System Architect",
        "Edinburgh",
        "5421",
        "2011/04/25",
        ",120"
    ],
    [
        "Jim Winters",
        "Director",
        "Edinburgh",
        "8422",
        "2011/07/25",
        ",300"
    ],
    [
        "Garrett Winters",
        "Director",
        "Edinburgh",
        "8422",
        "2011/07/25",
        ""
    ],
    [
        "",
        "Director",
        "Edinburgh",
        "8422",
        "2011/07/25",
        ""
    ],
    [
        "Jim West",
        "Director",
        "Edinburgh",
        "8422",
        "2011/07/25",
        ""
    ],
    [
        "Sandra Brown",
        "Director",
        "Edinburgh",
        "8422",
        "2011/07/25",
        ""
    ]  
]

  $( document ).ready(function() {
      console.log( "ready!" );
  });
   
  
  $('#example').DataTable( {
      data: data,
      "columnDefs": [ {
          "targets": 0,
          type: 'sortme'
      } ]
  } );
  
  $.fn.dataTable.ext.type.order['sortme-asc'] = function ( a) {
  // sorting logic here
  };
  $.fn.dataTable.ext.type.order['sortme-desc'] = function ( a) {
  // sorting logic here
  };  
  
</script>
  
  

</body>
</html>

Answer 1

您可以按如下方式使用$.fn.dataTable.ext.type.order：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Custom Sort</title>
</head>
<body>
  
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js"></script>

 

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>  
  
  
<script>
  
var data = [
    [
        "Jim Winters",
        "Director",
        "Edinburgh",
        "8422",
        "2011/07/25",
        ",300"
    ],
    [
        null,
        "System Architect",
        "Edinburgh",
        "5421",
        "2011/04/25",
        ",120"
    ],
    [
        "Garrett Winters",
        "Director",
        "Edinburgh",
        "8422",
        "2011/07/25",
        ""
    ],
    [
        "",
        "Director",
        "Edinburgh",
        "8422",
        "2011/07/25",
        ""
    ],
    [
        "Jim West",
        "Director",
        "Edinburgh",
        "8422",
        "2011/07/25",
        ""
    ],
    [
        "Sandra Brown",
        "Director",
        "Edinburgh",
        "8422",
        "2011/07/25",
        ""
    ]  
]

$( document ).ready(function() {
  console.log( "ready!" );

  $.extend( $.fn.dataTable.ext.type.order, {
    "sortme-asc": function ( a, b ) {
      let x = formatAsc( a );
      let y = formatAsc( b );
      return (x < y) ? -1 : ((x > y) ? 1 : 0);
    },
  
    "sortme-desc": function ( a, b ) {
      let x = formatDesc( a );
      let y = formatDesc( b );
      return (x < y) ? 1 : ((x > y) ? -1 : 0);
    }
  } );

  $('#example').DataTable( {
    "data": data,
    "columnDefs": [ {
      "targets": 0,
      "type": 'sortme'
    } ]
  } );
  
  function formatAsc( z ) {
    return z && z.trim() !== '' ? z : '~~~'; // choose whatever you prefer here
  }  

  function formatDesc( z ) {
    return z && z.trim() !== '' ? z : ''; // choose whatever you prefer here
  }  

});
 
</script>
  
</body>
</html>

这使用两个函数（一个用于 asc，一个用于 desc）为 null 和空字符串值提供替换值。您可以使用任何您想要的文本值，以确保列中的所有内容都将排序 before/after 您选择在这些函数中使用的字符串。

这里有一个问题：

初始显示不会触发自定义排序 - 不幸的是，我还没有（还？）找到解决方法。我试过 initComplete，但没有用。如果找到该部分的解决方案，我会更新。

更新：

在我的原始代码片段中，我将 $('#example').DataTable( {...} 代码放在 $.extend( $.fn.dataTable.ext.type.order, {...}) 代码之前。我交换了它们，以便顺序功能排在第一位，因此可用于初始显示排序顺序。

使不可显示的数据显示在 table 的底部

Make non displayable data to appear in the bottom of the table

javascript

jquery

datatables

datatables-1.10