Using List.js Sort And Search Not Working

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 htt

Solution 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" --><divid="my-cool-sortable-table-wrapper"><table><thead><thclass="sort"data-sort="gender">Gender</th><thclass="sort"data-sort="age">Age</th><thclass="sort"data-sort="city">City</th></thead><tbodyclass="list"><tr><tdclass="gender">male</td><tdclass="age">18</td><tdclass="city">Berlin</td></tr><tr><tdclass="gender">female</td><tdclass="age">46</td><tdclass="city">Reykjavik</td></tr><tr><tdclass="gender">female</td><tdclass="age">20</td><tdclass="city">Lisboa</td></tr><!-- and so on ...--></tbody></table></div><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script><scripttype="text/javascript">var options = {
        valueNames: [ 'gender', 'age', 'city' ]
    };
    var contactList = newList('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 = newList(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

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

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

to

<tableclass="table-bordered table-striped"><tbodyclass="list"><tr>

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

Solution 3:

***Add php tag before you start php code in an html content.***
//You can refer to below example:
<divclass="table-responsive"><divid="catalog"><inputclass="search"placeholder="Search" /><buttonclass="sort"data-sort="name">
    Sort Name
  </button><buttonclass="sort"data-sort="cat">
    Sort Category
  </button><h2> Catalog </h2><tableclass="list table-bordered table-striped"><tr><td><h2class="name">Name</h2></td></tr><?php$sql="SELECT * FROM country";
$resultSet = mysql_query($sql,$conn);
while($row = mysql_fetch_array($resultSet))
{?><tbody ><tr><tdclass="name"><?php$i=0;   
echo$row['cn_name'];
$i++;
}?></td></tr></tbody></table></div></div>
//Javascript
<scriptsrc="http://listjs.com/no-cdn/list.js"></script><scripttype="text/javascript">var options = {
    valueNames: [ 'name' ]//you can specify more columns by adding ,
};

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