6

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>
3
  • 1
    What have you done to debug the problem? Do you get any error in the console? edit: If you look at the console, you get an bunch of these errors: Failed to load resource: the server responded with a status of 404 (Not Found). Some of your scripts (e.g. jQuery) are not found. Dec 11, 2013 at 19:53
  • I've tried changing the class names. I'm not getting any errors. When I type in the search box everything goes away. That's what it should do and only show what you type but for some reason it isn't working like that. Yeah those were things I didn't need. I took them out.
    – Pureblood
    Dec 11, 2013 at 19:56
  • All I need is the listjs.com/overview/download list.ls correct? I don't need to do anything else?
    – Pureblood
    Dec 11, 2013 at 20:04

3 Answers 3

17

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

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:


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

1
  • 4
    For searching/filtering, one other (seemingly undocumented) requirement appears to be that the search <input> has to be in the div specified when calling the List constructor (as well as have the class "search"). I realize OP was just asking about sorting, but your answer is more generally applicable and better for getting oriented with List.js than the official documentation, so wanted to make a note here for others. Feb 27, 2015 at 22:14
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>.

-3
***Add php tag before you start php code in an html content.***
//You can refer to below example:
<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">Name</h2> </td>
</tr>
<?php   
$sql="SELECT * FROM country";
$resultSet = mysql_query($sql,$conn);
while($row = mysql_fetch_array($resultSet))
{?>
<tbody >
<tr><td class="name">
<?php 
$i=0;   
echo $row['cn_name'];
$i++;
}?>
</td></tr>
</tbody>
</table>
</div>
      </div>
//Javascript
<script src="http://listjs.com/no-cdn/list.js"></script>

      <script type="text/javascript">
var options = {
    valueNames: [ 'name' ]//you can specify more columns by adding ,
};

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.