CODEWITHSUNDEEP
jqueryruby-on-railshtml-table
Mike
Mike

Reputation: 1210

Jquery Tablesorter in ruby on rails

I'm using Ruby on Rails and have a table that I am trying to sort. The tablesorter jquery plugin and it is properly loaded in my files. I have jquery called in front of it at well. I have this code in my javascript. 

$(document).ready(function(){
  $("#myTable").tablesorter({widgets: ['zebra']});
  $("#business").tablesorter({sortList: [[0,0], [1,0]]});   
});

I have 2 tables. I have my table which is static just to see if the code was working right (and it does). I can sort by clicking on any of the headers.

<table id="myTable">
  <thead>
    <tr>
      <th>Last Name</th>
      <th>First Name</th>
      <th>Email</th>
      <th>Due</th>
      <th>Web Site</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Bach</td>
      <td>Frank</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.frank.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>[email protected]</td>
      <td>$100.00</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>Conway</td>
      <td>Tim</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
    </tr>
  </tbody>
</table>

But I also have my other table which is pulling dynamically from a database. Which doesn't work at all and does nothing at all when I click on the headers. 

<table width="650" cellpadding="6" cellspacing="0" id="business">
  <thead>
    <tr>
      <th>Business Name</th>
      <th>Address</th>
      <th>Category</th>
      <th>Description</th>
    </tr>
  </thead>
  <% @businesses.each do |business|if !business.approved %>
    <tbody>
      <tr>
        <td><a class="Contact<%=h business.id %>" href="#"><%=h business.name %></a></td>
        <td><%=h business.address %></td>
        <td><%=h business.business_category.name %></td>
        <td><%=h business.description %></td>
      </tr>
    </tbody>
  <% end %>
</table>

Any help would be great.

Upvotes: 0

Views: 2038

Answers (4)

scarver2
scarver2

Reputation: 7995

The issue is that your TBODY tags are being output for each row which is incorrect syntax. There should only be one TBODY per table. Your code should look like this:

<tbody>
  <% @businesses.each do |business|if !business.approved %>
    <tr>
      ...
    </tr>
  <% end %>
</tbody>

Edit (5/13/2015):

Better syntax would be to query the database for relevant results instead of all results and then performing a condition as was originally stated.

<tbody>
  <% @businesses.where(approved: false).each do |business| %>
    <tr>
      ...
    </tr>
  <% end %>
</tbody>

Best practice would be to scope the query in the model:

scope :not_approved, -> { where(approved: false) }

and perform the query in the controller:

@businesses = Business.not_approved

and then in the view, just enumerate the results:

<% @businesses.each do |business| %>

Upvotes: 1

thefoxbrain
thefoxbrain

Reputation: 63

This also solved exactly the same problem I had with using django. Moving the {% endfor %} inside the tag solved the problem

Upvotes: 0

thenobot
thenobot

Reputation: 1

Not sure if the repeated TBODY tags in the output of the problematic table are confusing the tablesorter.

Upvotes: 0

redsquare
redsquare

Reputation: 78677

I assume you are making an ajax call to request the dynamic table with an id of business? If so you need to call the tablesorter method when the table has been added to the dom, typically within the success method of .ajax. If you could show how you are requesting & inserting the business table I can provide help you futher.

Upvotes: 0

Related Questions