データテーブルの日付ソートdd / mm / yyyyの問題
datatables というJqueryプラグインを使用しています
素晴らしいですが、日付をdd/mm/yyyy形式に従って正しく並べ替えることはできません。
私はそれらのサポート形式を見てきましたが、これらの修正はどれもうまくいかないようです。
ここの誰かが私を助けてくれますか？
jQueryソリューション
jQueryソリューションの動作 です。
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function ( a ) {
var ukDatea = a.split('/');
return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
},
"date-uk-asc": function ( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"date-uk-desc": function ( a, b ) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );
上記のコードをスクリプトに追加し、特定の列に{ "sType": "date-uk" }およびその他の値がnullの日付値を設定します。以下を参照してください。
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
null,
null,
null,
{ "sType": "date-uk" },
null
]
});
});
CSSソリューション
迅速な解決策が必要な場合は、特定の形式（YYYYMMDD）で各行に実際のDateTime値を追加し、CSSを使用して非表示にするだけで、javascriptを変更せずにその列をソートできます。
HTML
<td><span class='hide'>YYYYMMDD</span>DD/MM/YYYY</td>
CSS
.hide {
display:none;
}
日付の並べ替え-非表示の要素
日付をYYYYMMDDの形式に変換し、<td>の実際の値（DD/MM/YYYY）の前に追加し、要素にラップします。スタイルdisplay:none;を要素に設定します。これで、日付のソートは通常のソートとして機能します。同じことが日時の並べ替えにも適用できます。
HTML
<table id="data-table">
<tr>
<td><span>YYYYMMDD</span>DD/MM/YYYY</td>
</tr>
</table>
CSS
#data-table span {
display:none;
}
これは古い質問であり、回答も古いことを知っています。最近、日付を並べ替えるシンプルでクリーンな方法に出会いました。これは、HTML5 data-order属性から<td>要素に実行できます。
PHPで行ったことは次のとおりです。
<?php
$newdate = date('d M Y', $myDateTime); // Format in which I want to display
$dateOrder = date('Y-m-d', $myDateTime); // Sort Order
?>
<td data-order="<?php echo $dateOrder; ?>" >
<?php echo $newdate; ?>
</td>
他の解決策： https://datatables.net/blog/2014-12-18
2つのJavaScriptライブラリを使用：//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.jsおよび//cdn.datatables.net/plug-ins/1.10.15/sorting/datetime -moment.js
それからこれだけ：
$（document）.ready（function（）{
$.fn.dataTable.moment( 'DD/MM/YYYY' ); $('#example').DataTable();}）;
phpまたはjsでは、次のように配列を渡して直交を使用するだけです。
$var[0][0] = "like as u wish, 30/12/2015 or something else";
$var[0][1] = strtotime($your_date_variable);
そして、データテーブルで...
$('#data-table-contas_pagar').dataTable({
"columnDefs": [
{"targets":[0],"data": [0],"render": {"_": [0],"sort": [1]}}
]
});
Momentum.jsまたはその他の日付形式を使用したくない場合は、日付値にミリ秒単位の日付形式を追加して、ミリ秒に従ってソートが読み取られるようにすることができます。ミリ秒の日付形式を非表示にします。
サンプルコード：
var date = new Date();
var millisecond = Date.parse(date);
HTML
<td>'<span style="display: none;">' + millisecond + "</span>" + date + </td>
それでおしまい。
これを試して：
"aoColumns": [
null,
null,
null,
null,
{"sType": "date"}, // "sType": "date" TO SPECIFY SORTING IS APPLICABLE ON DATE
null
]
このようにそれは私のために働いた。
<td data-order="@item.CreatedOn.ToString("MMddyyyyHHmmss")">
@item.CreatedOn.ToString("dd-MM-yyyy hh:mm tt")
</td>
data-order属性のこの日付形式は、DataTableでサポートされているこの形式でなければなりません。
私にとってはうまくいくようでした
データテーブル形式「2018-01-05 08:45:56」で描画されるデータセットのデータベースから選択クエリでフェッチされた完全な日時オブジェクトをプッシュします
それから
$('#Table').DataTable({
data: dataset,
deferRender: 200,
destroy: true,
scrollY: false,
scrollCollapse: true,
scroller: true,
"order": [[2, "desc"]],
'columnDefs': [
{
'targets': 2,
'createdCell': function (td, cellData, rowData, row, col) {
var datestamp = new Date(cellData);
$(td).html(datestamp.getUTCDate() + '-' + (datestamp.getMonth()+1) + '-' + datestamp.getFullYear());
}
}
],
"initComplete": function(settings, json) {
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust();
}
});
行が正しくソートされ、行に必要なhtmlが取得されます
注文する列に「sType」：「date-uk」を保持します。例：-"data": "OrderDate", "sType": "date-uk" ajaxのDatatableスクリプトの完了後、以下のコードを保持します
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function (a) {
var ukDatea = a.split('/');
return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
},
"date-uk-asc": function (a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"date-uk-desc": function (a, b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
次に、この形式で22-10-2018として日付を取得します
サーバーからのデータを使用する場合via Ajaxの場合、ソリューションは非常に簡単ですが、すぐには明らかではないかもしれないことを指摘したかったのです。
ソート順配列を返すとき、Datatablesは、（$_POSTで）と同等になる2要素配列を送信します
$_POST['order'][0] =array('column'=>'SortColumnName', 'dir'=>'asc');
// 2nd element is either 'asc' or 'desc'
したがって、任意の形式で日付を表示できます。サーバーがsortColumnNameのみに基づいてソート基準を返すようにします。
たとえば、PHP（MySQLを使用）では、次を使用します。
if (isset($_POST['order'])) {
switch ($_POST['order'][0]['column']) {
case 0:// sort by Primary Key
$order = 'pkItemid';
break;
case 1:// Sort by reference number
$order = 'refNo';
break;
case 2://Date Started
$order = 'dOpen';
break;
default :
$order = 'pkItemid';
}
$orderdir = ($_POST['order'][0]['dir'] === 'desc') ? 'desc' : 'asc';
}
$_POSTから$orderまたは$orderdirに何も渡されないため、クロススクリプト攻撃はできないことに注意してください。
次に、MySQLクエリに追加します。
$sql ="SELECT pkItemid, refNo, DATE_FORMAT(dOpen,'%b %e, %Y') AS dateStarted
FROM tblReference
ORDER BY $order $orderdir;";
クエリを実行し、dateStarted値のみをjsonのDatatablesに返します。
データベースから日付を取得し、各行に対してforループを実行し、javascriptで使用する文字列に追加して、データテーブルを自動的に設定する場合、次のようになります。隠されたスパントリックを使用する場合、6時間目などの日付の1桁の数字を考慮する必要があることに注意してください。そうしないと、ソートでスパントリックが機能しません。コードの：
DateTime getDate2 = Convert.ToDateTime(row["date"]);
var hour = getDate2.Hour.ToString();
if (hour.Length == 1)
{
hour = "0" + hour;
}
var minutes = getDate2.Minute.ToString();
if (minutes.Length == 1)
{
minutes = "0" + minutes;
}
var year = getDate2.Year.ToString();
var month = getDate2.Month.ToString();
if (month.Length == 1)
{
month = "0" + month;
}
var day = getDate2.Day.ToString();
if (day.Length == 1)
{
day = "0" + day;
}
var dateForSorting = year + month + day + hour + minutes;
dataFromDatabase.Append("<span style=\u0022display:none;\u0022>" + dateForSorting +
</span>");
この問題を解決する最も簡単な方法
このようにデザインを少し変更するだけです
//Add this data order attribute to td
<td data-order="@item.CreatedOn.ToUnixTimeStamp()">
@item.CreatedOn
</td>
Add create this Date Time helper function
// #region Region
public static long ToUnixTimeStamp(this DateTime dateTime) {
TimeSpan timeSpan = (dateTime - new DateTime(1970, 1, 1, 0, 0, 0));
return (long)timeSpan.TotalSeconds;
}
#endregion残りの呼び出しで使用しました
**日付変数：作成済み**
var call = $.ajax({
url: "../_api/Web/Lists/GetByTitle('NewUser')/items?$filter=(Created%20ge%20datetime'"+FromDate+"')%20and%20(Created%20le%20datetime'"+ToDate+"' and Title eq '"+epf+"' )&$top=5000",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR){
$('#example').dataTable({
"bDestroy": true,
"bProcessing": true,
"aaData": data.d.results,
"aLengthMenu" : [
[50,100],
[50,100]
],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'Excel'
],
"aoColumnDefs": [{ "bVisible": false }],
"aoColumns": [
{ "mData": "ID" },
{ "mData": "Title" },
{ "mData": "EmployeeName" },
{ "mData": "Department1" },
{ "mData": "ServicingAt" },
{ "mData": "TestField" },
{ "mData": "BranchCode" },
{ "mData": "Created" ,"render": function (data, type, row) {
data = moment(data).format('DD MMM YYYY');
return data;
}
このスニペットを使用してください！
$(document).ready(function() {
$.fn.dataTable.moment = function ( format, locale ) {
var types = $.fn.dataTable.ext.type;
// Add type detection
types.detect.unshift( function ( d ) {
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 ) {
return moment( d, format, locale, true ).unix();
};
};
$.fn.dataTable.moment('DD/MM/YYYY');
$('#example').DataTable();
});
jsはすべての日付と時刻の形式でうまく機能するので、以前にやったようにデータテーブルを初期化する前にこのスニッパーを追加します。
http://momentjs.com/ を読み込むことも忘れないでください
私はこれを試し、私のために働きました。
https://github.com/sedovsek/DataTables-EU-date-Plug-In
フォーマットモード.ToString("dd/MM/yyyy");を使用すると、jQuery.Datatableで問題なく動作します。
以下のjQ
oTable = $('#grid').dataTable({
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sType": "eu_date" },
null
]
});
});
日付のある列は、上記のコードのようにsTypeで定義する必要があります。
この解決策は完全に間違っています。日付の各コンポーネントを追加するだけでは、日付を数値に変換することはできません。たとえば次の日付でこのロジックを試すと、正しく一致しないことがわかります。
20/01/2014 = 2035 15/02/2014 = 2031
魔女の日付が最初に来るのですか？ 1月20日？この論理に従わない：P
正しい方法 parsedateメソッドを実行することは、文字列を有効な日時に変換することであり、それらはgetTime関数を使用してテーブルを適切に順序付けます。
var day = a.split('/')[0]
var month = a.split('/')[1]
var year = a.split('/')[2]
var date = new Date(month + "/" + day + "/" + year)
return date.getTime()
この場合のソートの最も簡単な方法は、JSに「aaSorting」オプションを追加することです。
例えば：
$(document).ready(function() {
$('#contacts-table').dataTable({
"aaSorting": [0, 'desc']
});
ここでの問題は、この例では日付のようではなく、STRINGのような1番目の列からエントリをソートすることです。ソースコードで日付形式をdd/mm/yyyyからyyyy/mm/ddに変更できる場合、「aaSorting」は適切に機能します。
Zaheer Ahmedのソリューションは、すでに英国形式の日付を処理する必要がある場合は正常に機能します。
私は、米国の形式の日付を管理しなければならなかったため、このソリューションに問題がありました。
私はこの小さな変化でそれを理解しました：
function parseDate(a) {
var ukDatea = a.split('/');
return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
}
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"date-uk-pre": function ( a ) {
return parseDate(a);
},
"date-uk-asc": function ( a, b ) {
a = parseDate(a);
b = parseDate(b);
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"date-uk-desc": function ( a, b ) {
a = parseDate(a);
b = parseDate(b);
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
「aoColumns」の定義が続きます。
問題の原因は日時形式です。
間違ったサンプル：「MM-dd-yyyy H：mm」、「MM-dd-yyyy」
正しいサンプル：「MM-dd-yyyy HH：mm」
この問題はphpで解決できます。
$mydate = strtotime($startdate);
$newformat = date('d-m-Y',$mydate);
echo '<tr>';
echo ' <td data-sort="'. $mydate .'">'.$newformat .'</td>';
data-orderタグで<td>属性を次のように使用します（Ruby Example）：
<td data order='<%=rentroll.decorate.date%>'><%=rentroll.decorate.date%></td>
ここでのデコレータ関数は次のとおりです。
def date
object.date&.strftime("%d/%m/%Y")
end
最も簡単な方法は、列のすべてのTDタグの日付の前に非表示のタイムスタンプを追加することです。次に例を示します。
<td class="sorting_1">
<span class="d-none">1547022615</span>09/01/2019 09:30
</td>
デフォルトの文字列の順序付けでは、タイムスタンプは列を希望どおりに順序付けし、ブラウザで表示されるときに表示されません。
私も同じ問題を抱えています。
私は03/21/2017のようなtdでspan withを使用していましたが、これを行うことで、datatableはこれを文字列として扱い、ソートは機能しませんでした。
Td内のspanを削除しましたが、修正されました。たとえば、2017年3月21日