95

datatablesというJqueryプラグインを使用しています

素晴らしいですが、dd / mm/yyyy形式に従って日付を正しく並べ替えることができません。

私はそれらのサポートフォーマットを見てきましたが、これらの修正はどれも機能していないようです。

ここの誰かが私を助けてくれますか？

4

28 に答える 28

159

更新 2020: HTML ソリューション

HTML 5 は非常に開発が進んでおり、ほとんどすべての主要ブラウザが HTML 5 をサポートしています。したがって、よりクリーンなアプローチは、HTML5 データ属性を使用することです (maxx777 は、単純な HTML を使用している PHP ソリューションを提供しました)。このシナリオのような数値以外のデータの場合、ソート可能な値を使用data-sortまたは属性付けして割り当てることができます。data-order

HTML

<td data-sort='YYYYMMDD'>DD/MM/YYYY</td>

これが作業中のHTMLソリューションです

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
        ]
    });
    });
于 2012-08-17T09:42:31.113 に答える
117

日付の並べ替え - 隠し要素あり

日付をYYYYMMDDの形式に変換し、 の実際の値 ( DD/MM/YYYY ) の前に追加<td>し、要素でラップし、要素にスタイルdisplay:none;を設定します。これで、日付の並べ替えが通常の並べ替えとして機能します。同じことが日時ソートにも適用できます。

HTML

<table id="data-table">
   <tr>
     <td><span>YYYYMMDD</span>DD/MM/YYYY</td>
   </tr>
</table>

CSS

#data-table span {
    display:none; 
}
于 2014-08-20T13:22:56.230 に答える
2

この問題は php で解決できます。

$mydate = strtotime($startdate);
$newformat = date('d-m-Y',$mydate);
echo '<tr>';
echo '  <td data-sort="'. $mydate .'">'.$newformat .'</td>';
于 2019-04-17T05:46:11.320 に答える
1

私はこれを試して、私のために働きました。

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 で定義する必要があります。

于 2014-06-25T20:10:59.183 に答える
0

このスニペットを使用してください。

$(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/をロードすることを忘れないでください

于 2016-08-24T06:14:05.527 に答える
0

この解決策は完全に間違っています。日付の各コンポーネントを追加するだけで、日付を数値に変換することはできません。たとえば、次の日付でこのロジックを試すと、正しく一致しないことがわかります。

2014 年 1 月 20 日 = 2035 年 2014 年 2 月 15 日 = 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()
于 2014-11-03T20:33:37.460 に答える
0

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」定義が続きます。

于 2013-06-21T09:38:23.427 に答える
0

サーバーからのデータを Ajax 経由で使用する場合、解決策は非常に単純ですが、すぐにはわからない可能性があることを指摘したいと思います。

並べ替え順序の配列を返す場合、Datatables は次のような 2 要素の配列を ( で) 送信し$_POSTます。

$_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 に返します。

于 2015-08-14T13:29:17.843 に答える
0

データベースから日付を取得し、各行に対して 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>");
于 2018-08-10T13:11:48.517 に答える