

list.jsを使ってテーブルをソートしたらテーブルの中身が全部消えます。何故でしょうか...

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
       <script src="../scripts/script.js"></script>
    <body>
       <div id='itemlist'>
    
          <button class='sort desc' data-sort='date'>Sort By Date</button>
    
          <table>
             <tbody class='list'>
    
             </tbody>
          </table>
       </div>
    
       <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
       <script type='text/javascript'>
          var options = {
          // 検索するターゲットデータ
          valueNames: [ 'date', 'elem' ]
          };
    
       // ターゲットとなるID
          var itemList = new List('itemlist', options);
       </script>
    </body>
    </html>
    
[/code]

[code]

    $(function() {
    
      var url = ["all-c_int.xml","all-dom.xml"];
      var feed = new Object();
    
      $.each(url, function(index, value){
    
        $.ajax({
          url: value,
          type:"GET",
          dataType:"xml",
          timeout:1000,
          xhrFields: {
            withCredentials: true
          },
          cache: false,
            error:function(){
              alert("Failed to load XML");
            },
            success:function(xml){
              $(xml).find("item").each(function(){
                var item_link=$(this).find("link").text();
                var item_title=$(this).find("title").text();
                var item_desc=$(this).find("description").text();
                var item_date=dateParse($(this).find('pubDate').text());
                feed[item_date] = "<tr><td class='date'>"+item_date+"</td><td class='elem'><a href='"+item_link+"'>"+item_title+"</a>"+item_desc+"</td></tr>";
                if(item_title!="") $(feed[item_date]).appendTo("tbody");
    
              });
            }
          });
    
      });
    
        function dateParse(str){
          var dateObject = new Date(str);
          year = dateObject.getFullYear();
          month = dateObject.getMonth();
          day = dateObject.getDate();
          hour = dateObject.getHours();
          minute = dateObject.getMinutes();
          second = dateObject.getSeconds();
    
          if (month < 10) { month ="0" + month; }
          if (day < 10) { day = "0" + day; }
          if (hour < 10) { hout = "0" + hour; }
          if (minute < 10) { minute = "0" + minute; }
          if (second < 10) { second = "0" + second; }
    
          return year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second + " ";
        }
    
    });
    
    
[/code]


CC BY-SA 4.0
2019-10-29T05:08:44.480
60064
2019-10-30T14:16:37.430
36357
question
javascript html jquery ajax xml
list.jsでソートしたらhtmlが消える


`itemList`の初期化タイミングが、テーブルの初期化タイミングより早いのが問題ですね。

HTMLの中に書いているコード（`<script
type='text/javascript'>`〜`</script>`）は消し、`script.js`を以下のようにすると良いと思います。

[code]

    $(function() {
    
      var url = ["all-c_int.xml","all-dom.xml"];
      var feed = new Object();
    
      function dateParse(str){
        var dateObject = new Date(str);
        year = dateObject.getFullYear();
        month = dateObject.getMonth();
        day = dateObject.getDate();
        hour = dateObject.getHours();
        minute = dateObject.getMinutes();
        second = dateObject.getSeconds();
    
        if (month < 10) { month ="0" + month; }
        if (day < 10) { day = "0" + day; }
        if (hour < 10) { hout = "0" + hour; }
        if (minute < 10) { minute = "0" + minute; }
        if (second < 10) { second = "0" + second; }
    
        return year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second + " ";
      }
    
      var endedCount = 0;
    
      function loadEnded(){
        endedCount++;
        if(endedCount >= url.length){
          window.options = {
            // 検索するターゲットデータ
            valueNames: [ 'date', 'elem' ]
          };
    
          // ターゲットとなるID
          window.itemList = new List('itemlist', options);
        }
      }
    
      $.each(url, function(index, value){
    
        $.ajax({
          url: value,
          type:"GET",
          dataType:"xml",
          timeout:1000,
          xhrFields: {
            withCredentials: true
          },
          cache: false,
            error:function(){
              alert("Failed to load XML");
              loadEnded();
            },
            success:function(xml){
              $(xml).find("item").each(function(){
                var item_link=$(this).find("link").text();
                var item_title=$(this).find("title").text();
                var item_desc=$(this).find("description").text();
                var item_date=dateParse($(this).find('pubDate').text());
                feed[item_date] = "<tr><td class='date'>"+item_date+"</td><td class='elem'><a href='"+item_link+"'>"+item_title+"</a>"+item_desc+"</td></tr>";
                if(item_title!="") $(feed[item_date]).appendTo("tbody");
    
              });
    
              loadEnded();
            }
          });
    
      });
    
    });
    
    
[/code]


CC BY-SA 4.0
2019-10-30T14:16:37.430
60139
2019-10-30T14:16:37.430
17181
60064
answer