Question

I have the following code in “listings.js” in my rails app. Im using the gem datatables to show some data. I would like to have my columns and rows highlighted as shown in this example. But the highlight feature is not working in my app.

//Initialize the datatable
$(document).ready(function()
{
  var listingsTable = $('#listings').dataTable(
  {
    "sPaginationType":  "full_numbers",
    "bJQueryUI": true,
    "bSortClasses": false,
    "sScrollX": "90%",
    "bScrollCollapse": true,
    "sDom":  '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": $('#listings').data('source')
  });

  $('td', listingsTable.fnGetNodes()).hover(function() 
    {
        var iCol = $('td').index(this) % 5;
        var nTrs = listingsTable.fnGetNodes();
        $('td:nth-child('+(iCol+1)+')', nTrs).addClass( 'datatablerowhighlight' );
    }, 
    function() 
    {
        $('td.datatablerowhighlight',     listingsTable.fnGetNodes()).removeClass('datatablerowhighlight');
    } );

});

Here is my listings.css.scss file

.datatablerowhighlight 
{
    background-color: #ECFFB3 !important;
}

So what am I doing wrong ?

Answer 1

From http://railscasts.com/episodes/340-datatables, try adding:

group :assets do
  gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails'
  gem 'jquery-ui-rails'
end

to your Gemfile and

//= require dataTables/jquery.dataTables

to app/assets/javascripts/application.js.