Upgrade to jquery-datatables-rails 2.2.3 from 2.2.1 breaks code in RailsCasts 340 Datatables

Question

This is informational, in that I am posing the question and will provide the answer. It's for the record and to help anyone that follows me here.

I build DataTables using RailsCasts 340. They worked great, but I had some struggles with it with column width versus table width and such. See Datatable rows extend past table boundary, or are too narrow. In general, it seemed to be a good idea to upgrade jquery-datatables-rails from 2.2.1 to 2.2.3 to get from DataTables 1.9 to 1.10. This also includes datatables-responsive 0.2.0.

Referring to Converting parameter names for DataTables 1.10, you'll see that there are non-breaking variable name changes. They are supposed to be backward-compatible to 1.9. If you are using native DataTables, that may be the case. But, it isn't for jquery-datatables-rails, especialy in reference to RailsCasts 340.

This question and answer is an attempt to ease that conversion for anyone coming along, and it may make it easier to implement this code initially.

Answer 1

I'm going to post some code that should help resolve these issues. First, my discussion with Allan, author of DataTables, should be helpful though not all the detail is included.

DataTables upgrade from 1.9 to 1.10 has some conversion issues. Again, they should be non-breaking except I am using jquery-datatables-rails and RailsCasts 340.

Refer to RailsCasts/AsciiCasts 340 to understand what follows. I am pulling code from my application, so its not a one-to-one match and you need to understand that tutorial.

The as_json call changes as follows, in terms of variable names.

DataTables 1.9 code:

  def as_json(options = {})
    {
        sEcho: params[:sEcho].to_i,
        iTotalRecords: Car.count,
        iTotalDisplayRecords: cars.total_entries,
        aaData: data
    }
  end

1.10 code:

  def as_json(options = {})
    {
        draw: params[:draw].to_i,
        recordsTotal: Car.count,
        recordsFiltered: cars.total_entries,
        data: data
    }

The other changes are in the "params" list, so they should be more clear.

params[:search][:value] replaces params[:sSearch]
params[:start] replaces params[:iDisplayStart]
params[:length] replaces params[:iDisplayLength]
params[:order]['0'][:column] replaces params[:iSortCol_0]
params[:order]['0'][:dir] replaces params[:sSortDir_0]

JQuery initialization logic can be complex, especially for several tables. I will submit this as my example for the mentioned gems. It shows initialization for two tables, though I have more. The second tables uses Ajax, allowing the server to provide the data dynamically for each page. My tables are also responsive, using the datatables-responsive gem. So, this is just a sample with the new variable names.

$(document).ready(function () {
    var breakpointDefinition, tableElement;
    var rHelperData, rHelperCar;
    rHelperData = void 0;
    rHelperCar = void 0;
    breakpointDefinition = {
        tablet: 1300,
        phone: 480
    };
    tableElement = $("#datatable");
    tableElement.dataTable({
        responsive: true,
        autoWidth: false,
        pagingType: "full",
        jQueryUI: true,
        preDrawCallback: function () {
            if (!rHelperData) {
                rHelperData = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
            }
        },
        rowCallback: function (nRow) {
            rHelperData.createExpandIcon(nRow);
        },
        drawCallback: function (oSettings) {
            rHelperData.respond();
        }
    });
    tableElement = $("#carstable");
    tableElement.dataTable({
        responsive: true,
        autoWidth: false,
        pagingType: "full",
        jQueryUI: true,
        processing: true,
        serverSide: true,
        ajax: $('#carstable').data('source'),
        preDrawCallback: function () {
            if (!rHelperCar) {
                rHelperCar = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
            }
        },
        rowCallback: function (nRow) {
            rHelperCar.createExpandIcon(nRow);
        },
        drawCallback: function (oSettings) {
            rHelperCar.respond();
        }
    });
});

Those are changes that I am using. There may be more, but you can see where this is going. You can refer to the core jquery-datatables-rails code.

I had one gotcha in RailsCasts 340. I was converting a working partial to use DataTables. To do that, I needed to remove all td elements, as they are defined and displayed dynamically.

Also, I'll mention that, as of today, jquery-datatables-rails 2.2.3 has a bug with the expand icon. It should be fixed within days. The expand icon is a strange duck. When a responsive table is too narrow to display all the cells in a row, you can hide some cells. When that happen, a plus sign should appear at the beginning of each row. The plus sign is the expand icon. If you click on it, all cells within that row are displayed. Currently, that expand icon, or the plus sign, does not display. It's a known bug that the author has said will be fixed.

Hope this helps.