zoukankan      html  css  js  c++  java
  • BootStrap DataTable 时间日期列排序

    BootStrap框架中 DataTable表头列中含有排序方法,当列为日期时,日期格式为dd/MM/yyyy,排序会发生混乱,如下图:
    在这里插入图片描述DataTable表格是默认按日期最前面的天排序,导致日期排序全部混乱。

    这时候我们在日期列中加上日期yyyy/MM/dd格式数据,这时候DataTable表格是默认排序就会以yyyy/MM/dd格式日期正常排序,如下:

    @model List<JSDataTable.Models.People>
    @{
        ViewBag.Title = "_AssetPartial";
    }
    <script src="~/Content/JS/jquery-2.1.1.js"></script>
    <link href="~/Content/Css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Css/datatables.min.css" rel="stylesheet" />
    <link href="~/Content/Css/animate.css" rel="stylesheet" />
    <script src="~/Content/JS/bootstrap.min.js"></script>
    <script src="~/Content/JS/datatables.min.js"></script>
    <br><br>
    <table class="table table-bordered table-hover dataTable" id="tblnotifyme" style=" 100%; margin-top: 10px">
        <thead style="font-weight: bold">
            <tr>
                <th class="text-center">
                    ID
                </th>
                <th class="text-center">
                    Name
                </th>
                <th class="text-center">
                    Address
                </th>
                <th class="text-center">
                    Description
                </th>
                <th class="text-center">
                    BirthDay
                </th>
                <th class="text-center">
                    UpdatedDate
                </th>
            </tr>
        </thead>
        <tbody>
            @if (Model != null && Model.Count > 0)
            {
                foreach (var i in Model)
                {
    
                    #region yyyy/MM/dd格式转化
                    string HiddenstrBirthDay;
                    if (i.BirthDay != null)
                    {
                        DateTime dtBirthDay = (DateTime)i.BirthDay;
                        HiddenstrBirthDay = dtBirthDay.ToString("yyyyMMdd");  //yyyyMMddHHmmss
                    }
                    else { HiddenstrBirthDay = ""; }
    
                    string HiddenstrUpdatedDate;
                    if (i.UpdatedDate != null)
                    {
                        DateTime dtUpdatedDate = (DateTime)i.UpdatedDate;
                        HiddenstrUpdatedDate = dtUpdatedDate.ToString("yyyyMMdd");
                    }
                    else { HiddenstrUpdatedDate = ""; }
                    #endregion
    
                    <tr>
                        <td class="text-center">@i.ID</td>
                        <td class="text-center">@i.Name</td>
                        <td class="text-center">@i.Address</td>
                        <td class="text-center">@i.Description</td>
                        <td class="text-center"><a style="display:none">@HiddenstrBirthDay</a>  @string.Format("{0:dd/MM/yyyy}", @i.BirthDay)</td>            @*以a标签包裹*@
                        <td class="text-center"><a style="display:none">@HiddenstrUpdatedDate</a>  @string.Format("{0:dd/MM/yyyy}", @i.UpdatedDate)</td>    @*以a标签包裹*@
    
                    </tr>
                }
            }
        </tbody>
    </table>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#tblnotifyme").DataTable({
                "iDisplayLength": 25,
                "aaSorting": [[0, "desc"]]
            });
        });
    </script>
    

    下面就可以正常排序了
    在这里插入图片描述

  • 相关阅读:
    Windows7下面手把手教你安装Django
    windows系统下Python环境的搭建
    PHP、Java、Python、C、C++ 这几种编程语言都各有什么特点或优点
    结构化程序设计 ?
    编译性语言、解释性语言和脚本语言
    在linux中关闭防火墙
    Linux下Apache服务的查看和启动
    AWS中,如果使用了ELB,出现outofservice
    亚马逊的PuTTY连接AWS出现network error connection refused,终极解决方案。
    9.Node.js 包管理器npm
  • 原文地址:https://www.cnblogs.com/wangqilong/p/12540394.html
Copyright © 2011-2022 走看看