Question

我有一个静态HTML页面，它使用Ajax加载动态表。我想要加载的表是使用list.js和jQuery构建的可排序表。当表格按行编码时，它们会加载并且可以排序而不会出现问题。一旦我介绍了Ajax，就会出现数据，但排序不再有效。

我知道绑定和.on（），但我不知道如何使用list.js

示例代码：

<html>
<head>
<script 
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"
src="//listjs.com/js/list.js"

$(document).ready(function(){

// Define value names
var overview_options = { valueNames: [ 'name', 'term', 'module', 'activity' ] };

// Init list
var overviewList = new List('list_overview', overview_options);

});

function loadTable() {

getTable=new XMLHttpRequest();
getTable.onreadystatechange=function()
{
if (getTable.readyState==4 && getTable.status==200)
    {
            document.getElementById("tableArea").innerHTML=getTable.responseText;
    }
}
getTable.open("GET","tableDate.html",true);
getTable.send();        
}

</script>

</head>
<body>

<div onClick="loadTable();">Load Table</div>
<div id="tableArea"></div>

</body>
</html>

Ajax文件正在引入：

<div class="list_holder">
  <table id="list_overview" cellpadding="10" >
    <thead>
      <tr>
        <th><span class="sort" data-sort="name">Name</span></th>
        <th><span class="sort" data-sort="term">Term</span></th>
        <th><span class="sort" data-sort="module">Module</span></th>
        <th><span class="sort" data-sort="activity">Activity</span></th>
      </tr>
    </thead>
    <tbody class="list">
      <tr>
        <td class="name">Zack Walker</td>
        <td class="term">3</td>
        <td class="module">Body Language</td>
        <td class="activity">None</td>
      </tr>
      <tr>
        <td class="name">Peter Jones</td>
        <td class="term">1</td>
        <td class="module">Body Language</td>
        <td class="activity">All</td>
      </tr>
      <tr>
        <td class="name">Zack Walker</td>
        <td class="term">3</td>
        <td class="module">Helping</td>
        <td class="activity">All</td>
      </tr>
    </tbody>
  </table>
  </td>
  </tr>
  </tbody>
  </table>
</div>

非常感谢！

Answer 1

在这里猜测，在填充ajax响应中的数据后，是否应该初始化列表？

如何通过ajax动态加载list.js并进行排序以继续工作

1 个答案: