Tag Archives: datatable

DataTables: Disable Sorting on a Column Tips, Tricks and Tutorials 31 JAN 2014

datatables plugin logoDataTables is a fantastic jQuery-powered plugin that supercharges your ordinary HTML tables and as such is pretty much my de facto method for presenting tabular data.

I often include special ‘action’ columns in my table where I lump in all my row data manipulating buttons and thus don’t particularly want to allow DataTable’s column sorting option added to those columns. Thankfully disabling the sorting option on specific columns has now become particularly easy, thanks to the aTargets configuration option.

To achieve the column sorting function we make use of the aoColumnDefs configuration option to turn off the bSortable flag, using the aTargets label to control which columns the specified property definition applies to.

In practice:

"aoColumnDefs": [{ 'bSortable': false, 'aTargets': [ 0,7,9 ] }]

Assuming my table has ten columns, this essentially turns off sorting for the first column, last column and the eighth column (remember, the column array is zero-indexed).

Related Link: http://datatables.net/

How to Refresh a DataTable without Losing Your Current Page or Ordering CodeUnit 28 MAY 2012

DataTables is a fantastic plug-in for the jQuery Javascript library that I use for pretty much all my web development projects. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table – in other words, it creates useful dynamic, with oodles of extra functionality, tables out of plain old vanilla HTML tables.

Anyway, there is often a need to be able to refresh your datatable after applying some action to the source data, and the usual method of forcing a refresh is by calling the standard fnDraw() function on the table object. However, whilst this will redraw the table, it will basically reset you completely, removing any filtering and jumping back to page 1 if you have a table with pagination.

So not ideal.

Thankfully one of the DataTables forum guys came up with a handy bit of extension code which introduces a new function called fnStandingRedraw() which extends the datatables API and allows you to fresh the datatable without losing your current view.

To implement, simply put the following code into a .js file and load it after you load the standard datatables.js library:

$.fn.dataTableExt.oApi.fnStandingRedraw = function(oSettings) {
    //redraw to account for filtering and sorting
    // concept here is that (for client side) there is a row got inserted at the end (for an add)
    // or when a record was modified it could be in the middle of the table
    // that is probably not supposed to be there - due to filtering / sorting
    // so we need to re process filtering and sorting
    // BUT - if it is server side - then this should be handled by the server - so skip this step
    if(oSettings.oFeatures.bServerSide === false){
        var before = oSettings._iDisplayStart;
        //iDisplayStart has been reset to zero - so lets change it back
        oSettings._iDisplayStart = before;
    //draw the 'current' page

Now on your page code, you can simply ask for a refresh by doing this:

//var oTable1 = $('#mytable').dataTable();


Related Link: http://datatables.net/

jQuery DataTables: Simple Row Highlight Example CodeUnit 17 AUG 2010

I’ve mentioned the wonderful jQuery plugin DataTables a number of times before, the awesome little trick that instantly transforms any HTML table fed to it into a fully sortable, paginated, searchable and zebra-striped table, requiring the most minimum of coding to implement.

Today’s tip looks at how you can quickly and easily implement a visually helpful hover-based row highlight on any of your datatable objects.

First off, you will need to define a highlight rule to be applied to your table in your CSS declarations. In the simplest form, all you really want to do is define a unique background-color to the element wish you wish to highlight.

In CSS, this could look something like this:

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

The next step is then to add our new highlight class to the row when the mouse hovers over it and then to remove it again when the mouse moves away. To do this we need to add bindings for the mouseenter and mouseleave jQuery events, where we add and remove the highlight class accordingly.

To do this, we piggyback into the handy fnDrawCallback function that is defined when initializing your datatable and which gets executed each time the datatable gets drawn.

Looking at this in code, you should now have:

$('#activitylog').dataTable( {
"fnDrawCallback": function(){
      $('table#activitylog td').bind('mouseenter', function () { $(this).parent().children().each(function(){$(this).addClass('datatablerowhighlight');}); });
      $('table#activitylog td').bind('mouseleave', function () { $(this).parent().children().each(function(){$(this).removeClass('datatablerowhighlight');}); });
} );

Note how we grab the whole rows contents y first grabbing the parent element of the element we are currently hovering above, and then expanding to all that parent’s children elements – in other word the entire row. A simple addClass and removeClass call handles the actual attaching and detaching of the highlight CSS class.

Nifty, and pretty damn effective to boot! ;)

Related Link: http://datatables.net/