Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Hiya <strong>sample demo</strong> here: <a href="http://jsfiddle.net/T4Vh4/" rel="nofollow noreferrer">http://jsfiddle.net/T4Vh4/</a></p> <p>To start with you are missing <code>&lt;th&gt;</code> tags in your example. I am given you a working sample so that you can compare your implementation of table sorter with the demo. :))</p> <p>Please let me know if this is what you are looking for!</p> <p>Good read: <a href="http://tablesorter.com/docs/" rel="nofollow noreferrer">http://tablesorter.com/docs/</a></p> <p>Hope this helps and have a nice one, d'uh don't forget to accept the answer if this helps :)!</p> <p><strong>HTML</strong></p> <pre><code>&lt;table class="tablesorter"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Make&lt;/th&gt; &lt;th&gt;Model&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Honda&lt;/td&gt; &lt;td&gt;Accord&lt;/td&gt; &lt;/tr&gt; &lt;tr class="expand-child"&gt; &lt;td colspan="2" style="padding: 0 30px 0 30px;"&gt; &lt;table class="tablesorter-child"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Doors&lt;/th&gt; &lt;th&gt;Colors&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Honda 2-Door&lt;/td&gt; &lt;td&gt;Honda Red&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Honda 4-Door&lt;/td&gt; &lt;td&gt;Honda Blue&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Toyota&lt;/td&gt; &lt;td&gt;Camry&lt;/td&gt; &lt;/tr&gt; &lt;tr class="expand-child"&gt; &lt;td colspan="2" style="padding: 0 30px 0 30px;"&gt; &lt;table class="tablesorter-child"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Doors&lt;/th&gt; &lt;th&gt;Colors&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Toyota 2-Door&lt;/td&gt; &lt;td&gt;Toyota Yellow&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Toyota 4-Door&lt;/td&gt; &lt;td&gt;Toyota Green&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; ​ </code></pre> <p><strong>Jquery code</strong></p> <pre><code>$(document).ready(function() { $("table").tablesorter({selectorHeaders: '&gt; thead &gt; tr &gt; th'}); }); ​ </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload