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



我使用的是数据表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],
});

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

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

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

一些建议:

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;删除除第一列以外的所有列,依此类推。假设它在某个时刻开始工作,则可以逐个添加项。

最新更新