DataTables jqueryプラグインで日付でソートするにはどうすればよいですか？
私はdatatables jqueryプラグインを使用していますが、日付でソートしたいです。
プラグインを入手したことは知っていますが、実際にダウンロードする場所が見つかりません
http://datatables.net/plug-ins/sorting
このファイルが必要だと思います：dataTables.numericComma.jsまだどこにも見つからず、データテーブルをダウンロードしてもZipファイルにないようです。
また、このプラグインに渡すために独自のカスタム日付ソーターを作成する必要があるかどうかもわかりません。
この形式を並べ替えようとしていますMM/DD/YYYY HH：MM TT（AM | PM）
ありがとう
編集
これを変更してMM/DD/YYYY HH：MM TT（AM | PM）でソートし、米国の日付に変更するにはどうすればよいですか？
jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function(a,b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
Date（dd/mm/YYY）の下にある「show details」リンクをクリックして、そこに提供されたプラグインコードをコピーして貼り付けることができます。
更新：配列の順序を次のように切り替えることができると思います。
jQuery.fn.dataTableExt.oSort['us_date-asc'] = function(a,b) {
var usDatea = a.split('/');
var usDateb = b.split('/');
var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
var usDatea = a.split('/');
var usDateb = b.split('/');
var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
私がしたことは__date_[1]（日）および__date_[0]（月）、およびukをusに置き換えたため、混乱することはありません。それはあなたのためにそれを大事にするべきだと思います。
更新＃2：比較のために日付オブジェクトのみを使用できるはずです。これを試して：
jQuery.fn.dataTableExt.oSort['us_date-asc'] = function(a,b) {
var x = new Date(a),
y = new Date(b);
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
var x = new Date(a),
y = new Date(b);
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
日付の並べ替え-非表示要素
日付を[〜＃〜] yyyymmdd [〜＃〜]の形式に変換し、<td>の実際の値（MM/DD/YYYY）の前に追加し、ラップします。要素では、スタイルdisplay:none;を要素に設定します。これで、日付のソートは通常のソートとして機能します。同じことが日時のソートにも適用できます。
HTML
<table id="data-table">
<tr>
<td><span>YYYYMMDD</span>MM/DD/YYYY</td>
</tr>
</table>
CSS
#data-table span {
display:none;
}
HTML5データ属性を使用する必要があります。https://www.datatables.net/examples/advanced_init/html5-data- attributes.html
data-order要素をtd要素に追加するだけです。
プラグインは不要です。
<table class="table" id="exampleTable">
<thead>
<tr>
<th>Firstname</th>
<th>Sign Up Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td data-order="2015-11-13 12:00">13. November 2015</td>
</tr>
<tr>
<td>Daniel</td>
<td data-order="2015-08-06 13:44">06. August 2015</td>
</tr>
<tr>
<td>Michael</td>
<td data-order="2015-10-14 16:12">14. October 2015</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#exampleTable').DataTable();
});
</script>
これは2年前の質問ですが、まだ役に立つと思います。最終的には、Fudgeyが提供するサンプルコードをマイナーなmodを使用して使用しました。時間を節約してくれました、ありがとう！
jQuery.fn.dataTableExt.oSort['us_date-asc'] = function(a,b) {
var x = new Date($(a).text()),
y = new Date($(b).text());
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
var x = new Date($(a).text()),
y = new Date($(b).text());
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
2015年時点で、DataTableのDate列を並べ替える最も便利な方法は、 必須の並べ替えプラグイン を使用することです。私の場合の日付形式はdd/mm/yyyy hh:mm:ss、私は date-euroプラグイン を使用することになりました。必要なのは、次のことだけです。
ステップ1：ソートプラグインを含める JavaScriptファイル またはコードand;
ステップ2：columnDefsを以下に示すように追加して、適切な列をターゲットにします。
$('#example').dataTable( {
columnDefs: [
{ type: 'date-euro', targets: 0 }
]
});
データテーブルは「ISO-8601」のDateTime形式でのみ順序付けできるため、「date-order」の日付をこの形式に変換する必要があります（Razorを使用した例）：
<td data-sort="@myDate.ToString("o")">@myDate.ToShortDateString() - @myDate.ToShortTimeString()</td>
誰かが日付値またはセルのいずれかに空白スペースがあるという問題が発生した場合に備えて、それらのビットを処理する必要があります。空のスペースは、「$ nbsp;」のようなhtmlからのトリム関数によって処理されないことがあります。これらを処理しないと、並べ替えが適切に機能せず、空白がある場合はどこでも壊れてしまいます。
ここでもjquery拡張機能からこのコードを取得し、要件に合わせて少し変更しました。同じことをする必要があります:)乾杯！
function trim(str) {
str = str.replace(/^\s+/, '');
for (var i = str.length - 1; i >= 0; i--) {
if (/\S/.test(str.charAt(i))) {
str = str.substring(0, i + 1);
break;
}
}
return str;
}
jQuery.fn.dataTableExt.oSort['uk-date-time-asc'] = function(a, b) {
if (trim(a) != '' && a!=" ") {
if (a.indexOf(' ') == -1) {
var frDatea = trim(a).split(' ');
var frDatea2 = frDatea[0].split('/');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
}
else {
var frDatea = trim(a).split(' ');
var frTimea = frDatea[1].split(':');
var frDatea2 = frDatea[0].split('/');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
}
} else {
var x = 10000000; // = l'an 1000 ...
}
if (trim(b) != '' && b!=" ") {
if (b.indexOf(' ') == -1) {
var frDateb = trim(b).split(' ');
frDateb = frDateb[0].split('/');
var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
}
else {
var frDateb = trim(b).split(' ');
var frTimeb = frDateb[1].split(':');
frDateb = frDateb[0].split('/');
var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
}
} else {
var y = 10000000;
}
var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
return z;
};
jQuery.fn.dataTableExt.oSort['uk-date-time-desc'] = function(a, b) {
if (trim(a) != '' && a!=" ") {
if (a.indexOf(' ') == -1) {
var frDatea = trim(a).split(' ');
var frDatea2 = frDatea[0].split('/');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
}
else {
var frDatea = trim(a).split(' ');
var frTimea = frDatea[1].split(':');
var frDatea2 = frDatea[0].split('/');
var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
}
} else {
var x = 10000000;
}
if (trim(b) != '' && b!=" ") {
if (b.indexOf(' ') == -1) {
var frDateb = trim(b).split(' ');
frDateb = frDateb[0].split('/');
var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
}
else {
var frDateb = trim(b).split(' ');
var frTimeb = frDateb[1].split(':');
frDateb = frDateb[0].split('/');
var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
}
} else {
var y = 10000000;
}
var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
return z;
};
Update＃1については、2つの問題があります。
- 日数= 1（dd/MM/YYYY）ではなく1（d/MM/YYYY）
- 空の日付
これらの問題を回避するためのソリューションは次のとおりです。
jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function (a, b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');
//Date empty
if (ukDatea[0] == "" || ukDateb[0] == "") return 1;
//need to change Date (d/MM/YYYY) into Date (dd/MM/YYYY)
if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0];
if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
//Sorting by Date
jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function (a, b) {
var ukDatea = a.split('/');
var ukDateb = b.split('/');
//Date empty
if (ukDatea[0] == "" || ukDateb[0] == "") return 1;
//MANDATORY to change Date (d/MM/YYYY) into Date (dd/MM/YYYY)
if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0];
if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];
var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};
リンクをたどる https://datatables.net/blog/2014-12-18
日付による順序付けを統合する非常に簡単な方法。
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
データテーブルを初期化する前に次のコードを入力します。
$(document).ready(function () {
// ......
$.fn.dataTable.moment('DD-MMM-YY HH:mm:ss');
$.fn.dataTable.moment('DD.MM.YYYY HH:mm:ss');
// And any format you need
}
「yyyyMMddHHmmss」という形式の文字列として日付を含む非表示列「dateOrder」を作成し、「orderData」プロパティを使用してその列を指すようにします。
var myTable = $("#myTable").dataTable({
columns: [
{ data: "id" },
{ data: "date", "orderData": 4 },
{ data: "name" },
{ data: "total" },
{ data: "dateOrder", visible: false }
] });
私は一日中取り組んだ後に解決策を得ました。それは少しハッキーなソリューションですtdタグ内にスパンを追加しました
<td><span><%= item.StartICDate %></span></td>.
私が使用している日付形式はdd/MM/YYYYです。 Datatables1.9.0でテスト済み