Обновление до jquery-datatables-rails 2.2.3 с 2.2.1 прерывает код в RailsCasts 340 Datatables

Question

Это информация, потому что я задаю вопрос и дам ответ. Это для записи и для того, чтобы помочь всем, кто следует за мной здесь.

Я создаю DataTables, используя RailsCasts 340. Они отлично работали, но у меня были некоторые проблемы с шириной столбца в зависимости от ширины таблицы и тому подобное. См. Датируемые строки выходят за границы таблицы или являются слишком узкими. В целом, было бы неплохо обновить jquery-datatables-rails с 2.2.1 до 2.2.3, чтобы получить данные из DataTables 1.9 до 1.10. Это также включает datatables-отзывчивый 0.2.0.

Обращаясь к разделу "Преобразование имен параметров для DataTables 1.10", вы увидите, что изменения имен переменных не нарушаются. Предполагается, что они обратно совместимы с 1.9. Если вы используете собственные DataTables, это может иметь место. Но это не для jquery-datatables-rails, особенно в отношении RailsCasts 340.

Этот вопрос и ответ - попытка облегчить это преобразование для любого, кто придет, и это может упростить реализацию этого кода на начальном этапе.

Answer 1

Я собираюсь опубликовать код, который должен помочь решить эти проблемы. Во-первых, мое обсуждение с Алланом, автором DataTables, должно быть полезным, хотя не все детали включены.

Обновление DataTables с 1.9 до 1.10 имеет некоторые проблемы с конвертацией. Опять же, они должны быть неразрушающими, за исключением того, что я использую jquery-datatables-rails и RailsCasts 340.

Обратитесь к RailsCasts/AsciiCasts 340, чтобы понять, что следует. Я извлекаю код из своего приложения, так что это не однозначное соответствие, и вам нужно понять этот учебник.

Вызов as_json изменяется в терминах имен переменных.

Код DataTables 1.9:

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

1.10 код:

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

Другие изменения находятся в списке "params", поэтому они должны быть более понятными.

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 может быть сложной, особенно для нескольких таблиц. Я представлю это в качестве моего примера для упомянутых драгоценных камней. Это показывает инициализацию для двух таблиц, хотя у меня есть больше. Во второй таблице используется Ajax, что позволяет серверу динамически предоставлять данные для каждой страницы. Мои таблицы также отзывчивы, используя гем datatables-отзывчивый. Итак, это просто пример с новыми именами переменных.

$(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();
        }
    });
});

Это те изменения, которые я использую. Там может быть больше, но вы можете видеть, куда это идет. Вы можете обратиться к основному коду jquery-datatables-rails.

У меня была одна ошибка в RailsCasts 340. Я конвертировал рабочую часть в DataTables. Для этого мне нужно было удалить все элементы td, так как они определены и отображаются динамически.

Также я упомяну, что на сегодняшний день в jquery-datatables-rails 2.2.3 есть ошибка со значком расширения. Это должно быть исправлено в течение нескольких дней. Значок расширения - странная утка. Если адаптивная таблица слишком узка, чтобы отображать все ячейки подряд, вы можете скрыть некоторые ячейки. Когда это происходит, знак плюс должен появляться в начале каждой строки. Знак плюс - это значок расширения. Если щелкнуть по нему, отображаются все ячейки в этой строке. В настоящее время этот значок расширения или знак плюс не отображается. Это известная ошибка, которая, по словам автора, будет исправлена.

Надеюсь это поможет.