使用数据表按 asc/desc 顺序排列表列

Question

我正在使用数据表 v1.10.13。我在根据 laravel 的 created_at 显示数据时遇到问题。在获取数据时，我根据 created_at desc 获取帖子，但在显示数据时，它按字母顺序显示数据。如何使用数据表首先获取最新帖子？我没有使用 ajax 填充数据。

我有这个查询来获取 PostController 中的帖子：

$allPost = $this->post->orderBy('created_at', 'desc')->get();

我在 html 中有以下代码：

<div class="dt-responsive table-responsive">
<table id="posts-data" class="table table-striped table-bordered nowrap dataTable no-footer" role="grid" aria-describedby="basic-col-reorder_info">
    <thead>
        <tr>
            <th>Title</th>
            <th>Category</th>
            <th>Status</th>
            <th>Image</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @if(!empty($allPost)) @foreach($allPost as $postsLists)
        <tr>
            <td>{{ $postsLists->title }}</td>
            <td>
                @if(!empty($postsLists->categories)) @foreach($postsLists->categories as $cat_lists)
                <i class="icofont icofont-arrow-right"></i> {{$cat_lists->name}}
                <br> @endforeach @endif
            </td>
            <td>{{ $postsLists->status }}</td>

            <td><img src="{{ $postsLists->image }}" alt="" width="100"></td>
            <td><a href="{{ $postsLists->image }}" target="_blank">View image</a></td>
            <td>
                <a href="{{ route('posts.edit', $postsLists->id) }}" class="btn btn-primary btn-sm pull-left" style="margin-right: 5px">
                    <span class="icofont icofont-ui-edit"></span>
                </a>
                <a class="pull-left" onclick="return confirm('Are you sure you want to delete this post?')">
              <form method="POST" action="{{ route('posts.destroy', $postsLists->id) }}" accept-charset="UTF-8">
                  <input name="_method" type="hidden" value="DELETE">
                  <input name="_token" type="hidden" value="{{ csrf_token() }}">
                  <button class="btn btn-danger btn-sm" type="submit"><span class="icofont icofont-ui-delete"></span></button>
              </form>
          </a>
            </td>
        </tr>
        @endforeach @endif
    </tbody>
</table>

我有以下代码来调用初始化数据表：

$('#posts-data').DataTable({
    colReorder: true,
    pageLength: 0,
    lengthMenu: [20, 40, 60, 80, 90, 100],
});

Answer 1

添加order: [] 应该可以解决您的问题：

$('#posts-data').DataTable({
    colReorder: true,
    order: [],
    pageLength: 0,
    lengthMenu: [20, 40, 60, 80, 90, 100],
});

默认情况下，数据表将按第一列对表格进行排序，因此在您的情况下为标题，但由于您提供数据的初始排序，您可以将默认排序设置为空数组。

Answer 2

一些建议：

1) DataTables“无​​默认排序”选项

@Remul - order: [] 提出的解决方案应该有效。这表明其他地方存在问题，可能会干扰 DataTables。一些建议：

(a) foreach 迭代器正在做一些令人惊讶的事情。不太可能，但您可能需要检查一下。

(b) 您能否使用order [] 让DataTables 最初按任何其他 字段排序？例如，按第一列降序排序：

order: [[ 0 , "desc" ]],

(c) 您的 DataTables 初始化程序是否放置在 document ready 函数中？

$(document).ready(function() {

  $('#posts-data').DataTable({
    colReorder: true,
    order: [],
    pageLength: 0,
    lengthMenu: [20, 40, 60, 80, 90, 100],
  });

});

我确定是这样 - 但以防万一......

2) 将您的 created_at 数据添加到表中

我假设这是一个日期或日期时间字段。 DataTables 对日期和时间排序的支持有些有限（不使用插件），因此我建议将您的数据格式化为可排序的字符串字段（例如 YYYY-MM-DD HH24:MI:SS 或任何适合您的变体）。

(a) 您可以将其添加为隐藏字段。

(b) 只是一个建议：考虑将其添加为可见字段。否则，用户可能会按其他列对数据进行排序，他们将无法返回到最初显示的排序顺序（created_at 降序）。像这样的：

"columnDefs": [
  {
    "targets": 5, // assuming the datetime is the 6th column
    "visible": false
  }
]

3) 从基本解决方案构建

去掉所有不需要的东西来展示你想要的排序顺序。因此，例如，删除colReorder;删除除第一列之外的所有列，依此类推。假设它在某个时候开始工作，您可以一个一个地添加项目。