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

Question

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

Я строю DataTables с использованием RailsCasts 340. Они отлично работали, но я боролся с ним с шириной столбца и шириной таблицы. См. Datatable rows extend past table boundary, or are too narrow. В целом, было бы неплохо обновить jquery-datatables-rails с 2.2.1 до 2.2.3, чтобы получить от DataTables 1.9 до 1.10. Это также включает в себя данные, отвечающие требованиям к файлам данных 0.2.0.

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

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

Answer 1

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

Обновление DataTables с 1.9 до 1.10 имеет некоторые conversion issues. Опять же, они должны быть неразрывными, за исключением того, что я использую 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, позволяя серверу динамически предоставлять данные для каждой страницы. Мои таблицы также реагируют, используя драгоценный камень, отвечающий данным. Итак, это всего лишь образец с новыми именами переменных.

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

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

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

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

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