使用javascript和表格排序器动态获取时无法对日期列进行排序答案

【问题标题】：Unable to sort the date column when getting dynamically using javascript and table sorter使用javascript和表格排序器动态获取时无法对日期列进行排序
【发布时间】：2018-01-06 08:55:10
【问题描述】：

我通过 json 动态获取并将其添加到表中。当我试图通过发布日期对表进行排序时，由于无法读取未定义的属性“2”，因此我正在使用表排序器插件。这是我的代码..

   <html>
  <head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <Script src="http://tablesorter.com/__jquery.tablesorter.min.js"></Script>
    <script>
        $(function(){
     $('#keywords').tablesorter(); 
  });

    </script>
  <style>
       #keywords thead {
          cursor: pointer;
        background: #c9dff0;
      }
  </style>
 </head>
 <body>
<center style="padding-top:10px;">
  <input type="text" name="keyword" id="keyword" placeholder="playlistid">
  <input type="number" name="max_results" id="max_results" placeholder="max results">
   <button type="submit" name="results" id="results" onclick="searchVideo($('#keyword').val())">Submit</button> <br><br>
 <!-- <textarea id="s_results" rows="10" cols="150"></textarea><br><br>-->
</center>
<table class="table table-bordered sortable" style="width:90%" id="keywords">
<thead>
    <tr>
       <!-- <th>VIDEO INDEX</th>-->
        <th>VIDEO ID</th>
       <th>VIDEO TITLE</th>
        <th>PUBLISHED DATE</th>
        <th>CHANNELNAME</th>
         <th>VIEWS</th>
        <!--<th>CHANNEL SUBSCRIBERS</th>-->
    </tr>
</thead>
    <tbody>
    </tbody>
</table>
<script>
  var apiKey = 'apikey';
   var pageToken = '';
   var numOfResult = 0;
    function searchVideo(keyword) {
      var maxResults = parseInt($('#max_results').val());;
       var type = 'video';
        var separator = "\n";
       $.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?playlistId=' + keyword + '&key=' + apiKey + '&maxResults=50&pageToken=' + pageToken + '&part=snippet&callback=?',function(data){

        var l = data.items.length;
        pageToken = data.nextPageToken;
        numOfResult += l;
        var itemUrl = '';

        for(var i = 0; i < l; i++) {
          if( i == 0) {
            separator = '\n';
          }
          else {
            separator = '\n';
          }

            var position = data.items[i].snippet.position;
            $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics&id='+data.items[i].snippet.resourceId.videoId+'&key='+ apiKey + '&callback=?',function(data1){


                 var time = data1.items[0].snippet.publishedAt;
                var date = new Date(time);
                var myDate = date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear()+"&nbsp"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();

                $('table tbody').append("<tr><td><a target=\'_blank\' href=\'https://www.youtube.com/watch?v="+data1.items[0].id+"\'>"+data1.items[0].id+"</a></td><td>"+data1.items[0].snippet.title+"</td><td>"+myDate+"</td><td>"+data1.items[0].snippet.channelTitle+"</td><td>"+data1.items[0].statistics.viewCount+"</td></tr>");

            });

        }

        if( numOfResult < maxResults) {
          searchVideo(keyword);
        }

    });
 }
   </script>
    </body>
 </html>

谁能帮我整理一下。提前致谢。 Tablesorter 插件未检测到表格

【问题讨论】：

标签： javascript sorting datetime dynamic tablesorter

【解决方案1】：

在空表上加载页面后，您已初始化表排序器。

而是在从 YT-API 获取数据并将其设置到您的表后立即删除它并初始化插件

$('table tbody').append(....)
$('#keywords').tablesorter();

对于日期排序，请查看 tablesorter 演示/示例 - 开箱即用，仅适用于标准日期格式；-)

【讨论】：