如何使用jquery数据表对最后一项显示第一页最后一项的顺序进行排序？

Question

我正在使用 jquery 数据表来显示项目列表。它是按降序显示的。它也有分页。所以它首先在第一页的顶部显示最后一项。它工作正常。

但我想在底行的第一页显示最后一项。不至顶行。表示我想在第一页但在行的底部显示最后一项。

这是我的代码：

$('#example1').DataTable({
      "pageLength": 2,
      "order": [ 0, 'desc' ],
      'ordering'    : true,
    })

这是下面的图片，因为这是“desc”顺序，它首先显示最后一项。所以这是在顶部显示由“2020-06-01 19:08:19”创建的项目。但我希望这个显示在底部。

请帮助我如何使用 jquery 数据表来做到这一点。

谢谢

Answer 1

你可以这样做：

$('#example1').DataTable({
  "pageLength": 2,
  "order": [0, 'desc'],
  'ordering': true
});

$("#example1 tbody tr:first").insertAfter($("#example1 tr:last"));

$(document).on("click", ".paginate_button", function() {
  let page = $(this).attr("data-dt-idx");
  if (page == 1) {
    $("#example1 tbody tr:first").insertAfter($("#example1 tr:last"));
  }
});

$(document).on("click", ".previous", function() {
  let page = $(".paginate_button.current").attr("data-dt-idx");
  if (page == 1) {
    $("#example1 tbody tr:first").insertAfter($("#example1 tr:last"));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<table id="example1">
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>6</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>7</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>8</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>10</td>
      <td>10</td>
      <td>10</td>
    </tr>
  </tbody>
</table>

更新：如评论所述，目标是在每个页面上显示页面底部的最后一项。这可以按如下方式完成：

$('#example1').DataTable({
  "pageLength": 2,
  "order": [0, 'desc'],
  'ordering': true
});

$("#example1 tbody tr:first").insertAfter($("#example1 tr:last"));

$(document).on("click", ".paginate_button", function() {
    $("#example1 tbody tr:first").insertAfter($("#example1 tr:last")); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">

<table id="example1">
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>6</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>7</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>8</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>10</td>
      <td>10</td>
      <td>10</td>
    </tr>
  </tbody>
</table>

更新 2：如评论所述，使用“搜索”或“显示项目”功能时，最后一项也应显示在表格底部。通过使用回调函数drawCallback，可以最轻松地完成此操作以及所有其他所需的结果。要测试搜索功能，请搜索“test”。

$('#example1').DataTable({
  "pageLength": 2,
  "order": [0, 'desc'],
  "ordering": true,
  "drawCallback": function( settings ) {
       $("#example1 tbody tr:first").insertAfter($("#example1 tr:last"));
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">

<table id="example1">
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>test</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>test</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>6</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>7</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>8</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>10</td>
      <td>10</td>
      <td>10</td>
    </tr>
  </tbody>
</table>