CODEWITHSUNDEEP
javascriptsortingdatetimedynamictablesorter
Sameera Cheema
Sameera Cheema

Reputation: 11

Unable to sort the date column when getting dynamically using javascript and table sorter

Am getting dynamically through json and adding it to the table. When am trying to sort the table through published date am getting error as cannot read property '2' of undefined am using table sorter plugin. Here is my code..

   <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>

Can anyone please help me with the sorting . Thanks in advance . Tablesorter plugin is not detecting the table

Upvotes: 1

Views: 193

Answers (1)

Evil_skunk
Evil_skunk

Reputation: 3382

You have initalized table sorter after page loading on an empty table.

Instead remove that and initalize the plugin right after fetching data from YT-API and setting it to your table

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

For sorting dates please look into tablesorter demo/examples - out of the box it's only possible for standard date formats ;-)

Upvotes: 1

Related Questions