Pabi Pabi - 1 year ago 66
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">
<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>

<%Employe.where(company_id:, request: true).each do |employe|%>
<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"><></td>
<td class="center"><></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;"><></td>

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
's. I have also added the class
to the table.

Please let me know how to make this work.

Answer Source

Looks like you've missed initialization:

    $(function() {

From docs:

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