排序时List.js列表中的项目消失

Question

我正在使用List.js创建可排序和可搜索的列表，并且还将CSV文件中的数据导入到此列表中。我可以单独完成这两项操作，但是当我尝试将它们组合时，列表（从CSV导入）在我尝试对其进行排序时就会消失。

除了HTML之外，我是所有其他方面的新手，因此，如果您能像我5岁那样解释一下，我将不胜感激。

CSV导入在外部javascript.js文件中进行。

<script type="text/javascript" src="javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">Sort by name</button>
  <button class="sort" data-sort="min-order">Sort by minimum order</button>
  <button class="sort" data-sort="fee">Sort by delivery fee</button>
  <button class="sort" data-sort="time">Sort by delivery time</button>
  <button class="sort" data-sort="carrier">Sort by carrier</button>
  <button class="sort" data-sort="url">Sort by URL</button>
  <ul class="list"></ul>
</div>

window.onload = function() {
  $.ajax({
    url: "mydata.csv",
    dataType: "text",
    success: function(data) {
      var csv_file = data.split(/\r?\n|\r/);
      var table_data = '';
      for (var count = 0; count < csv_file.length; count++) {
        var cell_data = csv_file[count].split(";");
        table_data += '<li>';
        for (var cell_count = 0; cell_count < cell_data.length; cell_count++) {
          if (cell_count === 0) {
            table_data += '<h3 class="name">' + cell_data[cell_count] + '</h3>';
          } else if (cell_count === 1) {
            table_data += '<p class="min-order">' + cell_data[cell_count] + '</p>';
          } else if (cell_count === 2) {
            table_data += '<p class="fee">' + cell_data[cell_count] + '</p>';
          } else if (cell_count === 3) {
            table_data += '<p class="time">' + cell_data[cell_count] + '</p>';
          } else if (cell_count === 4) {
            table_data += '<p class="carrier">' + cell_data[cell_count] + '</p>';
          } else if (cell_count === 5) {
            table_data += '<p class="url">' + cell_data[cell_count] + '</p>';
          } else {
            table_data += '<p>' + cell_data[cell_count] + '</p>';
          }
        }
        table_data += '</li>';
      }
      table_data += '';
      $('.list').html(table_data);
    }
  });
var options = {
  valueNames: ['name', 'min-order', 'fee', 'time', 'carrier', 'url']
};
var userList = new List('users', options);
};

提前谢谢！