Custom pagination controls and info

Via the sDom property on DataTable initialisation, it’s possible to customise the positioning of the pagination information and controls. Aside from finding the resulting code hard to read, I also wanted more flexibility. First up, the pagination info (eg. Showing 1-10 of 25). Upon DataTables creation, you can pass in a function for the ‘fnInfoCallback’ which is triggered when the related status changes, as a result of a page change or filter being applied. Here I simply form a string using the available parameters then update the text for the element with the id ‘#paginationInfo’ on the page.

1
2
3
4
5

"fnInfoCallback": function(oSettings, iStart, iEnd, iMax, iTotal, sPre) {
  info = "Showing " + iStart + "-" + iEnd + " of " + iTotal;
  $('#paginationInfo).text(info);
  return info;
}

Next I wanted the freedom to position my ‘next’ and ‘previous’ pagination buttons anywhere, having assigned the DataTable initialisation to a variable (eg. userList = $('table#userList').dataTables()), making use of the public API, specifically the fnPageChange function of the plugin makes this easy…

1
2
3
4
5
6

$('#nextPage').click(function() {
  return userList.fnPageChange('next');
});
$('#prevPage').click(function() {
  return userList.fnPageChange('previous');
});

Multi filters and being able to clear all

The DataTables API makes filtering pretty simple with use of the fnFilter function, passing a string to filter on and optionally, a specific column to limit filtering to. With multiple columns having filters applied, the easy way to clear all filters is to simply call fnFilter('') - with an empty string and no column int arguement.

For the search field (which filters the table based on the entered text), I’m using the search input, part of HTML5 <input id="players-search" placeholder="Search by name..." type="search"> hooked up to filter the table on keyup. If you’re using Webkit, you’ll see the search box includes a button on the right to clear the contents of the text field. To have the table filter cleared when clicking the ‘X’: set a ‘click’ event on the search input which then takes its value and filters accordingly. In this case, the value will now be blank after having clicked the ‘X’ which effectively clears filtering on the table.

Using images according to the row data

It’s not long untill you’ll find yourself wanting to add buttons or images to the table, whether it be a users avatar, or perhaps a ‘Buy’ button for each product in the table. The fnRowCallback allows you to modify each row on draw and it’s here you have access to the data for each column and able to modify the output. Say you have a table of forum users with the following data, what if you wanted to show an image as a label for those who are admins?

1
2
3
4
5
6
7
8
9
10

<tr>
  <td>John</td>
  <td>Admin</td>
  <td>London</td>
</tr>
<tr>
  <td>Paul</td>
  <td>Moderator</td>
  <td>New York</td>
</tr>

When creating the DataTable, use the ‘aoColumns’ table (or the aoColumnDefs alternative) to give classes to the columns to allow us to easily target each:

1
2
3
4
5

'aoColumns': [
  { "sClass": "name", },
  { "sClass": "role" },
  { "sClass": "city" }
]

The nRow parameter of the fnRowCallback function refers to the HTML row currently being drawn. In this case, if the column text happens to be ‘admin’, replace the cells content with the jQuery generated img element:

1
2
3
4
5
6
7
8

"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
  role = $('.role', nRow).text();
  if (role == 'admin') {
    adminLabel = $('<img/>', { "class": "admin-icon" })
    $('.role', nRow).html(adminLabel);
  }
  return nRow;
}

If you wanted to be able to filter on this column too, one solution is to use the ‘text-indent’ property to visually hide text, leaving the image all that’s visible while still giving DataTables something to work with.

So the purpose of this post was to bring DataTables to your attention and to demonstrate how I’ve approached implementing the functionality I desired. For many of your uses, the plugin will be plug and play – and you no longer have an excuse not to provide these useful table interaction controls for your users.

I tried clearing various ram caches, recreating the wireless connection in network preferences, setting custom DNS, manual IP address, rebooting the router, performing dance rituals to the wireless dities etc and I was beginning to lose hope. Mention of an upcoming 10.7.1 update had me hopeful, but upon installation I had a few minutes of joy before the problems returned with all it’s troublesome tendencies. So what did work for me? Changing my wireless routers channel, specifically to channel 4 (avoid anything over 11 for the BT HomeHub router).

Now many have reported various fixes having worked but I’ve felt compelled to post this as not only have I got wireless working flawlessly on the Lion installed Mac Mini, but I’ve noticed a huge stability and performance increase. So regardless of whether you continue to have issues or not, switching up the wireless channel may work wizardry for you. Everything is sharper, more responsive and as a broadband speed test has shown me, more consistent, with the speed chart not varying over the course of the test. If you have BT Broadband, and in particular, you’re using an older HomeHub, give this a go and you may be surprised. The automatic channel selection works incorrectly in versions of the HomeHub prior to the latest version 3 from what I’ve read. Now, go forth and get back on that information super highway…

The aim was to set up a Sinatra app, running with Nginx and Passenger. The installation of all was easy enough, up till the final step of pointing Nginx to my Sinatra app and seeing the following error: Exception LoadError in application (no such file to load -- rack/commonlogger)

Searches online suggest the issue could be down to file permissions, a poorly configured config.ru, or incorrect file paths. My config.ru correctly required rubygems and Sinatra (which depends on rack and thus includes it) and I tried everything from switching ruby versions to creating new users/groups. Frustratingly, the issue was none of these, and the error never helped lead me to the solution. Passenger is smart enough to know if your app is a rack app by the existence of config.ru in the folder above the ‘public’ folder specified in the Nginx config settings. It’s almost smart enough to call Bundler.setup() if you happen to have a Gemfile.

I had a Gemfile in my app, yet had removed Bundler and so wasn’t including the gem anywhere. The solution? remove the Gemfile.

This post does more to show my lack of passenger skills than it does for my community giving efforts but hopefully this’ll help someone even if that person is me, stumbling across this post in 6 months time.

Having switched to a Mac after years of being solely a Windows user (and you think you had a tough time growing up?!), every day is very much a learning curve. Today was no different, while trying to get libxml2 working nicely with the Nokogiri rubygem, I installed a newer version of the toolkit to a different location. My Mac stubbornly insisted on using the current 2.6.16 version so I bravely strolled into terminal and ran: sudo rm /usr/lib/libxml*.

It turns out libxml2 is pretty fundamental to Mac and without it I was stuck. Helpfully, I had no access to the Leopard installer and the CD drive on this MacBook happens to be broken. Still, equiped with a bit of time, a Windows PC nearby and a USB stick, here’s the steps I took:

1. Found out the exact software version I needed. As I am using version 10.5.8 of OSX10, this webpage told me it’s libxml2 version 2.6.16 that’s built in, so this was what I went on the hunt for.
2. Grabbed the source code from the directory of old libxml2 versions versions, before unpacking and copying the libxml2-2.6.16 to the USB stick.
3. Booted the Mac in Single user mode, by holding Command+S from the second you hit the power button. This sends you to a terminal prompt from where the fun begins.
4. Mounting the USB drive had to be done before making use of the contents. This was done by simply following the steps detailed in this blog article. This left me with my USB contents available within/Volumes/usb.

From here, it was a simple case of installing the software with use of the standard linux program installation steps:

1
2
3

./configure  
make  
make install

Once complete, a reboot finally took me past the grey loading screen and back to where I was. Once the overwhelming emotion of being reunited with a loved one passed, I was back to developing. Lesson learnt: don’t be an idiot. Never sticks with me.

A key aspect to remember is that the purpose of capistrano is to run commands on your remote deployment server as if you were running them locally on the server itself. So when we reach the task of grabbing the code from your chosen code repository (cloning from git for example), the command is being called from the deployment server and so it’s this connection that requires the ssh connection set up is order to avoid passwords.

The solution here is to set up the ssh key between your deployment server and your source code repository server to authorise the connection, and this is done in the usual way: running ssh-keygen on the deployment server, then copying the generated .ssh/id_rsa.pub into a new line of your source code servers .ssh/authorized_keys2 file. The details here may vary depending on your setup.

Done, no more pestering – capistrano is supposed to improve productivity after all right?

1) Searchd daemon cannot be found

This error occurred when attempting to deploy on production, and research on the internet yielded little in the way of solutions. The executable was present and included in the path, with the issue being down to running the thinking_sphinx:index rake task without specifying the rails environment.

Now this is not documented anywhere so there could be something I’ve missed during the configuration. The call:

1

  rake thinking_sphinx :index RAILS_ENV=production

will do as expected, creating the configuration file based on the ‘define_index’ block in your Rails models and indexing as defined. A similar problem has caught many out before, such as leaving out the RAILS_ENV when performing a db:migrate. A more helpful error message from Thinking Sphinx would certainly be helpful.

2) Partial word searching

The Thinking Sphinx documentation mentions ‘Automatic Wildcards’ within its searching page yet this fails to work for partial words. Say I have an article titled ‘never enough’, the document would be retrieved if the search was for ‘never’, but not for simply ‘nev’. In my case, I’m using Thinking Sphinx during an auto complete search and so would require such functionality.

The solution is present within the ‘Advanced Sphinx Configuration’ page and all that’s required is to include the following line within your sphinx.yml in the config directory of your Rails application:

1

min_prefix_len: 3

where 3 is the minimum number of letters till a search takes place. Note that this line can also be used within individual ‘define_index’ blocks if you do not want it to apply globally to all indexes within the same environment.

There’s many resources out there that detail how to use jQuery with Ruby on Rails, specially how to handle the returning of data and the setting of javascript acceptance headers. Ryan Bates for example has a Railscast on the topic - yet in my case, I was not wanting to serialize and submit a form. If you simply want to post data to the server and insert the returned generated html into your page – simply use the jQuery.ajax with dataType set to script. From here, you can simply render the partial within the controllers format.js block and all should work without the need for any prior jQuery setup.

To demonstrate, here’s two code snippets copied straight from an application of mine:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  # the jquery
  $.ajax({
    url: '/polls/' + poll_id + '/vote?option_id=' + option_id,
    dataType: 'script',
    type: 'POST',
    success: function(data) { $('#poll').html(data); }
  });

  # the controller action
  respond_to do |format|
    format.html { redirect_to '/' }
    format.js {
      render :partial => 'widget', :locals => { :poll => @poll }
    }
  end

Till next time!