2016-03-23 20 views
0

私はHTMLテーブルの列をソートするために使用するコードを持っていますが、日付フィールドを除いて完全に動作します。アルファベットと純粋な数字それは素晴らしい作品!しかし、日付の列に使用すると、ソーターは私が望むように動作しません。現在の日付はそうのように並べ替えられます:プラグインなしのJavaScriptのソート日付

2016年1月2日

2016年2月1日

2014年12月12日

2015年12月14日

私は何が起こりたいですか:

2014年12月12日

2015年12月14日

2016年1月2日

2016年2月1日

ここで私はこの種を作るために使用するにはjavascriptがあります現在の仕事:

var tb, asc1 = 1, 
    asc2 = 1, 
    asc3 = 1, 
    asc4 = 1, 
    asc5 = 1, 
    asc6 = 1; 

     function sort_table(tbody, col, asc) { 
     var rows = tbody.rows, 
       rlen = rows.length, 
       arr = new Array(), 
       i, j, cells, clen; 
     // fill the array with values from the table 
     for (i = 0; i < rlen; i++) { 
      cells = rows[i].cells; 
      clen = cells.length; 
      arr[i] = new Array(); 
      for (j = 0; j < clen; j++) { 
      arr[i][j] = cells[j].innerHTML; 
      } 
      } 
     // sort the array by the specified column number (col) and order (asc) 
      arr.sort(function (a, b) { 
       return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1 * asc); 
      }); 
     // replace existing rows with new rows created from the sorted array 
      for (i = 0; i < rlen; i++) { 
       rows[i].innerHTML = "<td>" + arr[i].join("</td><td>") + "</td>"; 
      } 
     } 

onclickの機能はこれです

function test() { 
    sort_table(tb, 0, asc1); asc1 *= -1; asc2 = 1; asc3 = 1; asc4 = 1; asc5 = 1; asc6 = 1; 
}; 

どのように私はこれを起こすことができるかに関する提案はありますか?私はJavascriptには本当に新しく、毎日勉強しています!私の例から分からない場合は、日付形式はmm-dd-yyyyです。どんな助けでも大歓迎です!

UPDATE

彼は、それは私がそれをしたいが、私は自分のコードの中にそれを組み込むことができないとまったく同じ例で作業しているように私はダニエル・アルメイダコードを採用しています。私がそうするとき、並べ替えは不規則で、どこにでもあるようです。私はまた、jsfiddleを作成しましたが、私は全く何もするjsfiddleを取得することはできません

var sorter = function(id, column, order, isDate) { 
    var t = document.getElementById(id); 
    var rows = Array.prototype.slice.call(t.rows, 0); 

    rows = rows.sort(function(a, b) { 

    var dtA = (isDate) ? new Date(a.cells[column].innerHTML) : a.cells[column].innerHTML; 
    var dtB = (isDate) ? new Date(b.cells[column].innerHTML) : b.cells[column].innerHTML; 

    return (order == 0) ? dtA > dtB : dtA < dtB; 

}); 

for (i = 0; i < rows.length; i++) { 
    t.appendChild(rows[i]); 
    } 

} 

:私は今、次のコードで働いています。私が気づいていないことを私が逃していることを心配しています。ここにはjsfiddleがあります。

2つのテーブルを分割する理由は、ボトムテーブルが動的に読み込まれ、コンテナdivは100個の返されたレコードがある場合に情報の長いリストの代わりにスクロールウィンドウを許可します。

+0

ストア実際の日付オブジェクトをチェックし、それらを並べ替えます。表示する必要があるときにのみ日付オブジェクトを文字列に変換します。 – forgivenson

答えて

1

まず例この回答を参照してください。sort table

var sorter = function(td, id, column, isDate) { 

    var tbl = document.getElementById(id); 
    var rows = Array.prototype.slice.call(tbl.rows, 0); 

    var order = td.getAttribute("order") == "asc" ? "desc" : "asc"; 
    td.setAttribute("order", order); 

    rows = rows.sort(function(a, b) { 

     var valA = a.cells[column].innerText; 
     var valB = b.cells[column].innerText; 

     var compA = (isDate) ? new Date(valA) : valA; 
     var compB = (isDate) ? new Date(valB) : valB; 

     if (order == "asc") { 
     if (compA < compB) return -1; 
     if (compA > compB) return 1; 
     } 

     if (order == "desc") { 
     if (compA > compB) return -1; 
     if (compA < compB) return 1; 
     } 

     return 0; 

    }); 

    for (i = 0; i < rows.length; i++) { 
     tbl.appendChild(rows[i]); 
    } 

    } 

EDITは:代わりに、文字列のソート、このフィドルworking with date and text, asc and desc

+0

これは私が欲しいものを正確に実行していますが、これを上記のコードに組み込む方法を理解できません。私は、テキスト列と日付列の両方で並べ替えることができるようにしたい。希望の効果を得るために2つをどのように組み合わせることができるかについての任意のアイデアですか?私は新しいので、私は何か本当に単純なものを見ていると推測していると推測しています... –

+0

パラメータとして型を送ります.. '(id、column、order、type)'で作業し、日付に変換する前にチェックします.. ' var dtA =(type == "date")?新しい日付(a.cells [column] .innerHTML):a.cells [column] .innerHTML; ' –

+0

私はそのコードを追加しましたが、日付ではなく数字として日付をソートするように戻ったようです。ここにjsfiddle:[リンク](https://jsfiddle.net/5guypvhq/)があります。それは文字の列に完全に動作しますが、日付はありません。 –

1

JavaScriptを使用してDateオブジェクトを組み込みます。日付オブジェクトの配列を簡単にそうように、並べ替えることができます。

var array = [ 
    new Date("01/02/2016"), 
    new Date("02/01/2016"), 
    new Date("12/12/2014"), 
    new Date("12/14/2015") 
]; 
array.sort(); 
+0

私はクリーナーソリューションだと思います! –

+0

配列は日付だけではありません。テキスト列とvarchar列もあります。 –

0

あなたは

var arr = [];

arr[i]= new Date(item_date_string).getTime();

あなたは、整数の配列をソートすることができ、各項目の日付オブジェクトから時刻を取得することができます値を入力し、等価な日付の文字列を入力します。

0

日付をソートするためにjqueryプラグインを使用する場合は、またsort date in html table using jquery

+0

私は具体的には、プラグインを使用したくないと言っていました... –

関連する問題