按 Datatables.net 中的日期列排序

史蒂夫

我似乎无法弄清楚这一点以使我的日期列正确排序。我一直在使用它作为参考https://datatables.net/blog/2014-12-18我正在将 asp.net 与母版页一起使用。

我按以下顺序包括在内:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/Assets/js/plugins/jquery.dataTables.min.js")%>"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.20/sorting/datetime-moment.js"></script>

在母版页上,我有一个函数,我传入表 ID 和我想要打印的列以格式化内容页面上的数据表,这对于创建我的数据表来说效果很好。

function formatDatatable(id, printableColumns) {
                $(id).DataTable({
                    "pagingType": "full_numbers",
                    "lengthMenu": [
                        [10, 25, 50, -1],
                        [10, 25, 50, "All"]
                    ],
                    responsive: {
                        breakpoints: [
                            { name: 'desktop', width: Infinity },
                            { name: 'tablet', width: 1024 },
                            { name: 'fablet', width: 768 },
                            { name: 'phone', width: 480 }
                        ]
                    },
                    language: {
                        search: "_INPUT_",
                        searchPlaceholder: "Search records",
                    },
                    dom: 'Bfrtip',
                    buttons: [
                        'copy',
                        {
                            extend: 'excel',
                            exportOptions: {
                                columns: printableColumns
                            },
                        },
                        {
                            extend: 'pdf',
                            exportOptions: {
                                columns: printableColumns
                            }
                        },
                        {
                            extend: 'print',
                            exportOptions: {
                                columns: printableColumns
                            }
                        }
                    ]
                });
            }

另外,在母版页上,我有以下代码:

            $(document).ready(function () {
                    console.log(moment('Dec 1 2019 12:00AM', 'MMM d YYYY hh:mma').isValid()); //validates to true
                    $.fn.dataTable.moment('MMM d YYYY hh:mma');
                });

}

最后,我认为需要的最后一个功能。我曾尝试在 $(document).ready 和外部添加它,结果相同。我添加了一些日志,它会在加载数据表时打印 test1 和 test2,但在表格格式化后它不会创建任何日志,我尝试对列进行排序。

$.fn.dataTable.moment = function (format, locale) {
                    console.log("test1");
                    var types = $.fn.dataTable.ext.type;

                    // Add type detection
                    types.detect.unshift(function (d) {
                        console.log("test2");
                        return moment(d, format, locale, true).isValid() ?
                            'moment-' + format :
                            null;
                    });

                    // Add sorting method - use an integer for the sorting
                    types.order['moment-' + format + '-pre'] = function (d) {
                        console.log("test3");
                        return moment(d, format, locale, true).unix();
                    };
                };

以下是我尝试排序的表中的一些日期:2019 年 12 月 1 日 12:00AM、2020 年 1 月 2 日 3:58AM、2023 年 1 月 1 日 11:59PM

对此的任何帮助将不胜感激。

史蒂夫

我在上面的评论中接受了 VDWWD 的建议。我更新为使用我的数据返回隐藏的跨度,而不是使用给我带来很多问题的 moment js。

首先,我创建了一个接收可为空日期时间的函数:

public static string createDateColumnSpan(DateTime? date)
    {
        //if there is a date, format it
        if(date != null)
        {
            return "<span class='d-none'>" + Convert.ToDateTime(date).ToString("yyyyMMddHHmm") + "</span>";
        }
        //else return empty string
        else
        {
            return "";
        }
    }

在我的 linq 查询中,我能够像这样调用函数:

//get a list of events
var eventList = (from e in db.Events orderby e.DueDate select new
                {
                    e.ID,
                    e.DueDate
                }).AsEnumerable().Select(x => new
                {
                    x.ID,
                    DueDate = createDateColumnSpan(x.DueDate) + x.DueDate.ToString(),
                });

在此之后,该列使用 datatables.net 在客户端正确排序

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章