javascript - How to load list.js dynamically through ajax and for sort to continue working

I have a static HTML page which loads dynamic tables using Ajax. The tables I want to load are sortable tables built using list.js and jQuery. When the tables are coded in line they load and are sortable without issue. As soon as I introduce Ajax, the data appears but sorting no longer works.

I am aware of binding and .on() but I am not sure how to get it working with list.js

Example Code:

<html>
<head>
<script 
src="//ajax.googleapis/ajax/libs/jquery/1.10.2/jquery.min.js"
src="//ajax.googleapis/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"
src="//listjs/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>

And the file Ajax is pulling in:

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

Many thanks!

I am aware of binding and .on() but I am not sure how to get it working with list.js

Example Code:

<html>
<head>
<script 
src="//ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"
src="//ajax.googleapis./ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"
src="//listjs./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>

And the file Ajax is pulling in:

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

Many thanks!

Share Improve this question edited Sep 10, 2013 at 21:22 asked Sep 10, 2013 at 21:13 dmo 5,3313 gold badges26 silver badges28 bronze badges

Is the first <script tag like that in your code? Also, there's no reason to not use $.ajax if you already have jQuery on the page. – Alex W Commented Sep 10, 2013 at 21:26

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

Just guessing here, shouldn't you be initializing the list after you populate the data in your ajax response?

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to load list.js dynamically through ajax and for sort to continue working - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)