DataTables, Bootstrap, JS and you

So all the things I like about Ruby -- from the relatively easy, congenial language, to a limited number of special characters, to the simple bindings with the database, etc. -- exist NOT in Javascript.

Well, such is my limited visibility there as I've really done nothing with it. In an effort to make sortable tables, searchable tables, paginated tables all with Ajax bling, I decided to try dataTables.

I started with from Railscasts #340.

That led me to a gem at Github to bundle install in to my app.

I noticed that the documentation in the Github repository said dataTables and the gem work and can be configured with Twitter Bootstrap 2.0. As I'm using that I followed those instructions. I got tripped up by this part.

// For fluid containers
$('.datatable').dataTable({
  "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
  "sPaginationType": "bootstrap"
})

It took me a moment to figure out that was Coffeescript, which Rails uses by default.

The instructions at dataTables for Twitter styling has that script as:

"$(document).ready(function() {
    $('#example').dataTable( {
        "sDom": "<'row'<'span8'l><'span8'f>r>t<'row'<'span8'i><'span8'p>>"
    } );
} );

This is Javascript. I know this because I used it first and got an error due to the word "function" being reserved by Coffeescript. I then found one of the sites out there that converts Javascript to Coffeescript and basically saw the Coffeescript from the Github site referenced above. I should learn to trust more.

Now, I still had no idea what the instructions meant by "initializing" this script somehow. The instructions in the Railscasts video simply said to do this simple thing in the right controller JS file on my app:

jQuery ->
        $('#products').dataTable()</strong>

When I did JUST that, referencing my table ID, it worked fine. But when I replaced it with the other code, either JS or Coffeescript, it did nada. It took me a bit, but I got it working with a simple $ ->:

$ ->
    $("#customers").dataTable
    sDom: "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>"
    sPaginationType: "bootstrap"</strong>

It worked.

The pagination line is to let paginated stuff show in the Twitter Bootstrap style.

Now, I still had a problem. I added some styling to my CSS, but the table itself was scrunched like mad. Changing the SPANS in the JS did nothing to help the table. I looked around some more and found that if I changed my table reference in the "customers" view from:

<table id="customers">

TO:

<table class="table table-striped table-bordered" id="customers">

That worked as "table table-striped table-bordered" are default Twitter Bootstrap table styling markers. My table now looked BEAUTIFUL.

I still have ONE small issue.

If I navigate around my site, and come back to this table, the table loads fine, but NONE of the dataTables/AJAX/JQuery/search/sort/pagination shows up. I hit refresh and it shows back up. Not sure if this is a Rails caching feature I have to rig around or if this is that I'm not initializing that script correctly, but, I figure I can find that answer out eventually.

All fun so far.

Back
paperclip paperclip