Question

我一直在尝试对数据表日期列进行排序，但我无法成功地将其运行起来。我研究过几个没有运气的例子。日期总是排序不正确。

脚本：

     table = $('#FindUserTable')
     .on('search.dt', function () {
      })
     .on('page.dt', function () {
       var info = table.page.info();
       setTablePaging(info);
    })
    .on('length.dt', function (e, setting, len) {
    var info = table.page.info();
    setTablePaging(info);
    })
    .DataTable({
     'paging': true,
     responsive: true,
     "autoWidth": false,
     "language": {
     "paginate": {
     "next": "<i class='fa fa-chevron-right' style='color:#fff;'></i>",
     "previous": "<i class='fa fa-chevron-left' style='color:#fff;'></i>"
    }
    },
    "columnDefs": [
      { "orderable": false, "targets": 3 },
      {
        type : "date",
        "targets": 2,
        render: $.fn.dataTable.moment('MM/DD/YYYY')
    }
    ],
    "fnDrawCallback": function (evnt) {
      $('.dataTables_info').addClass('Hidden');
      var rows = $("#FindUserTable").dataTable().fnGetNodes();
      var noRecordFound = $('.NoRecordFound ');
       if (rows.length === 0 && noRecordFound.length === 1) { 
         $('.dataTables_empty').text('No record found.');
      } else if (rows.length === 0 && noRecordFound.length === 0) {
         $('.dataTables_empty').addClass('Hidden');
    }
    if ($('#FindUserTable_paginate ul.pagination li.paginate_button').size()> 2) {
    $('#FindUserTable_paginate')[0].style.display = "block";
    } else {
    $('#FindUserTable_paginate')[0].style.display = "none";
    }
    }
    });

<table  class="table table-responsive table-condensed" id="FindUserTable>
<thead>
<tr role="row"><th style="width:30%" class="sorting_asc" tabindex="0" aria-controls="FindUserTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="
	 User Last Name: activate to sort column descending">
	<label class="dataTableLabel"> User Last Name</label>
	<br>
	<div style="padding-bottom:.75em;">
		<input class="form-control fullWidth" id="LastName" name="LastName" type="text" value="">
	</div>
</th><th style="width:30%" class="sorting" tabindex="0" aria-controls="FindUserTable" rowspan="1" colspan="1" aria-label="
	 User First Name
	 : activate to sort column ascending">
	<label class="dataTableLabel"> User First Name</label>
	<br>
	<div style="padding-bottom:.75em;">
		<input class="form-control fullWidth" id="FirstName" name="FirstName" type="text" value="pat">
	</div>
</th><th style="width:20%" class="sorting" tabindex="0" aria-controls="FindUserTable" rowspan="1" colspan="1" aria-label="
	Date Of Birth: 
	activate to sort column ascending">
	<label class="dataTableLabel">Date Of Birth</label>
	<br>
	<div style="padding-bottom:.75em;">
		<input class="form-control fullWidth" data-val="true" data-val-date="The field DOB must be a date." id="DateOfBirth" name="DOB" type="text" value="">
	</div>
</th><th style="width:20%; padding-bottom:.7em" rowspan="1" colspan="1">
	<a id="searchUser" name="searchUser"><i class="glyphicon glyphicon-search fa-2x"></i></a>
</th></tr>
</thead>
<tbody class="findUserbody">
 <tr role="row" class="odd">
	<td style="text-align: center;" class="sorting_1"><div class="findUserData"> <input data-value="44" id="44" name="SelectedUser" type="radio" value="44">   Four </div></td>
	<td style="text-align: center; "><div class="findUserData">User</div></td>
	<td style="text-align: center; "><div class="findUserData"> 05/29/1996</div></td>
	<td></td>

</tr><tr role="row" class="even">
	<td style="text-align: center;" class="sorting_1"><div class="findUserData"> <input data-value="41" id="41" name="SelectedUser" type="radio" value="41">   One </div></td>
	<td style="text-align: center; "><div class="findUserData">User</div></td>
	<td style="text-align: center; "><div class="findUserData"> 07/31/2000</div></td>
	<td></td>

</tr><tr role="row" class="odd">
	<td style="text-align: center;" class="sorting_1"><div class="findUserData"> <input data-value="43" id="43" name="SelectedUser" type="radio" value="43">   Three </div></td>
	<td style="text-align: center; "><div class="findUserData">User</div></td>
	<td style="text-align: center; "><div class="findUserData"> 10/06/1996</div></td>
	<td></td>

</tr><tr role="row" class="even">
	<td style="text-align: center;" class="sorting_1"><div class="findUserData"> <input data-value="42" id="42" name="SelectedUser" type="radio" value="42">   Two </div></td>
	<td style="text-align: center; "><div class="findUserData">User</div></td>
	<td style="text-align: center; "><div class="findUserData"> 05/28/2000</div></td>
	<td></td>

</tr></tbody>
  </table>

Answer 1

问题在于具有日期的tds。 TD内部有一个div导致问题。在排序过程中，div也作为日期的一部分包含在内，而moment.js无法理解日期。

排序可数据日期的问题

1 个答案: