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>
    

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

  • 相关阅读:
    bzoj2876 [Noi2012]骑行川藏
    关于线性基的一些理解
    bzoj2115 [Wc2011] Xor
    bzoj2884 albus就是要第一个出场
    bzoj2460 [BeiJing2011]元素
    bzoj2005 [Noi2010]能量采集
    关于积性函数的一些理解
    bzoj4300 绝世好题
    Servlet—文件上传
    JNDI—目录接口名
  • 原文地址:https://www.cnblogs.com/wangqilong/p/12540394.html
Copyright © 2011-2022 走看看