JQuery Datatable 以简单的方式对日期列进行排序
JQuery Datatable Sort Date column in a simple way
我的日期列没有正确排序,它看起来像是在排序一个正常的数字而不是一个正确的日期列。
我将下面的 javascript 用于我的应用程序中的所有数据表,因此它对所有数据表都是通用的,这就是为什么我不设置列信息,我让它自动选择数据表。这样可以使我的日期列正确排序吗?或者我是否必须设置诸如列格式之类的东西?
table.dataTable({
stateSave: true,
"bLengthChange": false,
"bFilter": searchable,
"columnDefs": [{
"orderable": false,
"targets": [0]
}],
"order": [
[1, 'asc']
],
"bSort": true,
"lengthMenu": [
[10, 20, 50, 100, 150, -1],
[10, 20, 50, 100, 150, "All"]
],
"iDisplayLength": 10,
"pageLength": 10
});
下面是我的看法,我用的是MVC
<table class="table table-bordered" id="datatableList">
<thead class="heading">
<tr>
<th class="table-checkbox"><input type="checkbox" class="group-checkable" /></th>
<th>ID</th>
<th>Date</th>
<th>Account Name</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.AllLabourCharges.OrderByDescending(x => x.Date))
{
<tr>
<td><input type="checkbox" class="checkboxes" value="@item.Id" /></td>
<td>@Html.ActionLink(item.Id.ToString(CultureInfo.InvariantCulture).PadLeft(4, '0'), "Form", new { item.Id })</td>
<td>@item.Date.Date.ToString(GeneralHelper.DateFormat)</td>
<td>@Html.EmptyIfNull(x => item.Account.AccountName)</td>
</tr>
}
</tbody>
</table>
下面是我的参考资料:
<script src="~/Content/assets/global/plugins/select2/select2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="~/Content/assets/global/plugins/datatables/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/Content/assets/global/plugins/datatables/extensions/ColReorder/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="~/Content/assets/global/plugins/datatables/extensions/Scroller/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="~/Content/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js"></script>
您需要先定义所有列。
您的数据应该是准确的格式,例如日期格式应该是 javascript 日期,因此可以为日期做更多的事情。
您可以使用显示日期值添加隐藏日期值。
我遇到了与日期字段相同的问题,并按照上述解决方案解决了。
我的日期列没有正确排序,它看起来像是在排序一个正常的数字而不是一个正确的日期列。
我将下面的 javascript 用于我的应用程序中的所有数据表,因此它对所有数据表都是通用的,这就是为什么我不设置列信息,我让它自动选择数据表。这样可以使我的日期列正确排序吗?或者我是否必须设置诸如列格式之类的东西?
table.dataTable({
stateSave: true,
"bLengthChange": false,
"bFilter": searchable,
"columnDefs": [{
"orderable": false,
"targets": [0]
}],
"order": [
[1, 'asc']
],
"bSort": true,
"lengthMenu": [
[10, 20, 50, 100, 150, -1],
[10, 20, 50, 100, 150, "All"]
],
"iDisplayLength": 10,
"pageLength": 10
});
下面是我的看法,我用的是MVC
<table class="table table-bordered" id="datatableList">
<thead class="heading">
<tr>
<th class="table-checkbox"><input type="checkbox" class="group-checkable" /></th>
<th>ID</th>
<th>Date</th>
<th>Account Name</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.AllLabourCharges.OrderByDescending(x => x.Date))
{
<tr>
<td><input type="checkbox" class="checkboxes" value="@item.Id" /></td>
<td>@Html.ActionLink(item.Id.ToString(CultureInfo.InvariantCulture).PadLeft(4, '0'), "Form", new { item.Id })</td>
<td>@item.Date.Date.ToString(GeneralHelper.DateFormat)</td>
<td>@Html.EmptyIfNull(x => item.Account.AccountName)</td>
</tr>
}
</tbody>
</table>
下面是我的参考资料:
<script src="~/Content/assets/global/plugins/select2/select2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="~/Content/assets/global/plugins/datatables/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="~/Content/assets/global/plugins/datatables/extensions/ColReorder/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="~/Content/assets/global/plugins/datatables/extensions/Scroller/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="~/Content/assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js"></script>
您需要先定义所有列。
您的数据应该是准确的格式,例如日期格式应该是 javascript 日期,因此可以为日期做更多的事情。
您可以使用显示日期值添加隐藏日期值。
我遇到了与日期字段相同的问题,并按照上述解决方案解决了。