Pabi Pabi - 1 month ago 14
Javascript Question

Make a Table Sortable using jQuery and a Plugin

I am try to make my table sortable. This is what it currently looks like:

<table class="table table-bordered table-hover employement_request_panel tablesorter">
<thead>
<tr>
<th></th>
<th></th>
<th class="center">Name <i class="fa fa-angle-double-down"></i></th>
<th class="center">IQ <i class="fa fa-angle-double-down"></i></th>
<th class="center">Efficiency <i class="fa fa-angle-double-down"></i></th>
<th class="center">Focus <i class="fa fa-angle-double-down"></i></th>
<th class="center">Happiness <i class="fa fa-angle-double-down"></i></th>
<th class="center">Quality <i class="fa fa-angle-double-down"></i></th>
<th class="center">Salery <i class="fa fa-angle-double-down"></i></th>
</tr>
</thead>

<tbody>
<%Employe.where(company_id: company.id, request: true).each do |employe|%>
<tr>
<td class="center cd-popup-trigger popup1"><i style="color: green;" class="fa fa-check"></i></td>
<td class="center cd-popup-trigger popup2"><i style="color: red;" class="fa fa-close"></i></td>
<td class="center js-employee-name"><%=employe.name%></td>
<td class="center"><%=employe.iq%></td>
<td class="center"><%=employe.efficiency%></td>
<td class="center"><%=employe.focus%></td>
<td class="center"><%=employe.happiness%></td>
<td class="center"><%=employe.quality.capitalize%></td>
<td class="center"><%=employe.salery%></td>
<td class="js-employee-id" style="display:none;"><%=employe.id%></td>
</tr>
<%end%>
</tbody>
</table>


But I can not get it to work. I am using tablesorter to try and sort my table. I am calling
<%= javascript_include_tag('jquery.tablesorter.min.js') %>
, and jQuery but my table are not being not sortable or at least I can not get them to sort on the webapp by clicking the
<th>
's. I have also added the class
tablesorter
to the table.

Please let me know how to make this work.

Answer

Looks like you've missed initialization:

    $(function() {
        $('.tablesorter').tablesorter();
    });

From docs:

Start by telling tablesorter to sort your table when the document is loaded

Comments