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 supp

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/

    

        

            
Gender
            
Age
            
City
        
        

            

                
male
                
18
                
Berlin
            
            

                
female
                
46
                
Reykjavik
            
            

                
female
                
20
                
Lisboa
            
            
        
    

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