如何使用数据表对包含日期差异的列进行排序?

时间:2016-09-08 13:45:18

标签: jquery html sorting date datatables

我的表中有一列包含以下数据:

1 year 5 months 12 days
7 months
3 year 4 days

我想对此专栏进行排序。我怎么能这样做?

1 个答案:

答案 0 :(得分:3)

从DataTables手册中查看有关Orthrogonal data的文章。

假设您有一个包含3列的表格,第三列包含您要排序的与日期相关的数据。

尝试以这种格式提供数据:

// Array with data objects
var data = [
   {
      "column1": "column1_data",
      "column2": "column2_data",
      "column3": {
          "display": "1 year",
          // Convert '1 year' to 777600000 (or try your own convertion algorithm)
          "timestamp": "777600000"
      }
   },
   {
      "column1": "column1_data",
      "column2": "column2_data",
      "column3": {
          "display": "1 month",
          "timestamp": "12960000"
      }
   },
   .....
]

然后,在DataTables初始化中试试这个:

$('#myTable').DataTables({
   ....
   "columns": [
       { data: "column1" },
       { data: "column2" },
       { 
         data: "column3",
         render: {
            _: 'display',
            sort: 'timestamp'
         }
       }
   ],
   ....
});

通过这种方式,您可以以不可排序的格式(1年,5个月等)显示日期,但是您可以通过< timstamp'对此列进行排序。属性。

您所要做的就是将日期数据的文字表示转换为通用的可比较格式并提供数据数组。

日期转换提案

您只是将时间范围的文字表示转换为秒

/**
*  Function that convert a literal (n text) in to a number representing a timestamp
*/ @param literal {string} Text in specific format (n text): n {number} [blank] text {string} ('year','month','day','hour','minute','second')
*/
function convertLiteralToTimeSpan(literal) {
    ....
}



    function convertLiteralToTimeSpan(literal) {
        var textObj = {
           'second': '1',
           'minute': '60',
           'hour': '3600',
           'day': '216000',
           'month': '12960000',
           'year': '777600000'
        };
        var literalArr = literal.split(' ');
        var num = literalArr [0];
        var txt = literalArr [1];
        var factor = textObj[txt];
        
        return parseInt(num) * parseInt(factor);
    }

    var test = convertLiteralToTimeSpan('1 year');
    var test_month = convertLiteralToTimeSpan('1 month');
    var test_day = convertLiteralToTimeSpan('1 day');

    $('#result').html(test);
    $('#result_month').html(test_month);
    $('#result_day').html(test_day);

.result { font-weight:bold }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span>1 year</span>: <span id="result" class="result"></span><br />
<span>1 month</span>: <span id="result_month" class="result"></span><br />
<span>1 day</span>: <span id="result_day" class="result"></span>
&#13;
&#13;
&#13;