2016-03-23 72 views
0

我有一段代碼用於對HTML表中的列進行排序,它的工作原理非常完美......除了日期字段。字母和純數字它很好用!但是在日期列上使用時,分揀機不能按我的要求工作。目前日期排序得到像這樣:沒有插件的JavaScript排序日期

2016年1月2日

2016年2月1日

二○一四年十二月一十二日

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

我所採用丹尼爾·阿爾梅達代碼,因爲他有它在示例工作正是我想要它,但我無法將自己的代碼中包含它。當我這樣做的時候,似乎是不穩定的,到處都是。我現在用下面的代碼工作:

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但我不能得到的jsfiddle做任何事情。擔心我錯過了一些我不知道的東西。這裏是jsfiddle

拆分兩個表的原因是底部表是動態加載的,當有100個返回記錄時,容器div允許使用滾動窗口而不是長長的信息列表。

+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]); 
    } 

    } 

編輯:檢查這撥弄working with date and text, asc and desc

+0

這正是我想要的,但我無法弄清楚如何將這個插入到我的代碼中。我希望能夠通過文本列和日期列進行排序。有關如何將兩者結合起來以獲得理想效果的任何想法?我是新的,所以我猜我正在查找一些非常簡單的東西... –

+0

發送類型作爲參數..應該工作正常..'(id,列,順序,類型)'並檢查轉換日期之前..' var dtA =(type ==「date」)?新日期(a.cells [column] .innerHTML):a.cells [column] .innerHTML;' –

+0

我添加了那段代碼,但似乎回到將日期排序爲數字而不是日期。這裏是jsfiddle:[link](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

您可以從Date對象獲取時間爲每個項目

var arr = [];

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

您可以按整數數組值,然後填充數組的日期字符串