Using list.js sort and search not working

Question

This is my first time using list.js and for some reason it is not working.

Here is a live example. http://hartslogmuseum.com/bookhjr10/test.php here is what its supposed to do http://listjs.com/examples

And here is my code. I want to search only the name.

<div class="table-responsive">
<div id="catalog">
<input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort Name
  </button>
  <button class="sort" data-sort="cat">
    Sort Category
  </button>
 <h2> Catalog </h2>
<table class="list table-bordered table-striped">
<tr>
<td> <h2 class="name">Item Name</h2> </td>
<td><h2 class="cat">Item Category</h2></td>
<td> <h2>Thumbnail</h2></td>
<td> <h2 class="descr">Item Desc</h2> </td>
<td> <h2 class="time">Time Frame</h2> </td>
<td> <h2 class="donor">Donor</h2> </td>


</tr>
$resultSet = mysqli_query($conn,"SELECT * FROM bookhjr10_items");

While($row = mysqli_fetch_array($resultSet))
{
$i=0;   
echo "<tr>";
echo "<td class=\"name\">".$row['name']. "</td>";
echo "<td class=\"cat\">".$row['category']. "</td>";
echo "<td><a href=\"fullimage.php?id=".$row['id']."\" data-lightbox=\pic\"><img src=\"image.php?id=".$row['id']."\" alt=\"thumb-1\" /></a></td>";
echo "<td class=\"descr\">". $row['descr'] . "</td>";
echo "<td class=\"time\">". $row['time'] . "</td>";
echo "<td class=\"donor\">". $row['donor'] . "</td>";
echo "</tr>";
$i++;
}

?>
</table>
</div>
      </div>
      <script type="text/javascript">
var options = {
    valueNames: [ 'name' ]
};

var hackerList = new List('catalog', options);
</script>

Answer 1

You probably forgot one of the minimal requirements.

These seem the minimal requirements:

1. Indicate the table's parent element ID when calling list.js
2. The table's tbody must have the class list
3. If the table already has items (most cases I would assume), the options' valueNames parameter is mandatory. These values are the class name of the columns you want to sort (class name defined in EACH td, not on the th - although you can also add it to the th).
4. The table headers used for sorting must have a class of name sort
5. The table headers used for sorting must have a attribute data-sort with a value matching the name of the column's class name to be sorted

Here are a couple of list.js codepen examples using tables (this is from http://listjs.com/examples/add-get-remove):

• http://codepen.io/javve/pen/cLdfw
• http://codepen.io/anon/pen/IvlsJ

Minimal code example:

see also on http://jsfiddle.net/d7fJs/

<!-- for a table with a parent div of id "my-cool-sortable-table-wrapper", -->
<!-- and columns of class names "gender", "age" & "city" -->

<div id="my-cool-sortable-table-wrapper">
    <table>
        <thead>
            <th class="sort" data-sort="gender">Gender</th>
            <th class="sort" data-sort="age">Age</th>
            <th class="sort" data-sort="city">City</th>
        </thead>
        <tbody class="list">
            <tr>
                <td class="gender">male</td>
                <td class="age">18</td>
                <td class="city">Berlin</td>
            </tr>
            <tr>
                <td class="gender">female</td>
                <td class="age">46</td>
                <td class="city">Reykjavik</td>
            </tr>
            <tr>
                <td class="gender">female</td>
                <td class="age">20</td>
                <td class="city">Lisboa</td>
            </tr>
            <!-- and so on ...-->
        </tbody>
    </table>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<script type="text/javascript">
    var options = {
        valueNames: [ 'gender', 'age', 'city' ]
    };
    var contactList = new List('my-cool-sortable-table-wrapper', options);
</script>

Note: if the sorting behaves strangely - ie. the sorting is incorrect - it might be because you are missing one of the basic requirements. If you struggle, do a jsfiddle & ask your question on stackoverflow with a link to it.

---

If you want to avoid using this ID in the wrapping element, and use a custom selector instead, you can replace:

var contactList = new List('my-cool-sortable-table-wrapper', options);

By this:

var wrapperElement = $('.my .custom .selector');
var contactList = new List(wrapperElement[0], options);

see:

• Convert jQuery element to a regular dom element
• https://github.com/javve/list.js/issues/247#issuecomment-45215836

---

If you want to detect change events triggered by List.js & act accordingly (here we update row class names accordingly)

contactList.on("updated", function(){
    $('#my-cool-sortable-table-wrapper tr').removeClass('odd').filter(':visible:odd').addClass("odd");
})

List.js handles different event types. See full list at the bottom of this page http://listjs.com/docs/list-api

---

Official documentation http://listjs.com/docs/options

Answer 2

When using list.js with tables you should add class="list" to a <tbody> tag instead of the <table> tag.

So in your code change this part:

<table class="list table-bordered table-striped">
<tr>

to

<table class="table-bordered table-striped">
<tbody class="list">
<tr>

And don't forget to add a </tbody>.