Невозможно отсортировать столбец даты при получении динамически с использованием javascript и сортировщика таблиц

Question

Невозможно отсортировать столбец даты при получении динамически с использованием javascript и сортировщика таблиц

1

Я получаю динамически через json и добавляю его в таблицу. Когда я пытаюсь сортировать таблицу через опубликованную дату, я получаю ошибку, так как не могу прочитать свойство "2" неопределенного am с помощью плагина для сортировщика таблиц. Вот мой код..

   <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 не обнаруживает таблицу

Sameera Cheema 06 янв. 2018, в 10:40

Источник

Теги:

javascript

datetime

sorting

dynamic

tablesorter

1 ответ

Ещё вопросы

Evil_skunk · Answer 1 · 2018-01-06T08-05-00.000Z

У вас есть инициализированный сортировщик таблиц после загрузки страницы на пустой стол.

Вместо этого удалите это и инициализируйте плагин сразу после получения данных из YT-API и установки его в таблицу

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

Для сортировки давайте рассмотрите демонстрацию/примеры tablesorter - из коробки это возможно только для стандартных форматов даты ;-)