jquery - 从 2.2.1 升级到 jquery-datatables-rails 2.2.3 会破坏 RailsCasts 340 数据表中的代码

Question

这是提供信息的，因为我提出问题并将提供答案。这是为了记录并帮助任何关注我的人。

我使用 RailsCasts 340 构建 DataTables。它们工作得很好，但我在列宽与表宽等方面遇到了一些困难。请参阅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。如果您使用 native 数据表，则可能是这种情况。但是，它不适用于 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 初始化逻辑可能很复杂，尤其是对于多个表而言。我将提交这个作为我提到的 gem 的示例。它显示了两个表的初始化，尽管我有更多表。第二个表使用 Ajax，允许服务器动态地为每个页面提供数据。我的表也是响应式的，使用数据表响应式 gem。因此，这只是带有新变量名称的示例。

$(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 。它应该在几天内修复。展开图标是一只奇怪的鸭子。当响应式表格太窄而无法显示一行中的所有单元格时，您可以隐藏一些单元格。当发生这种情况时，每行的开头应该出现一个加号。加号是展开图标。如果单击它，则会显示该行中的所有单元格。目前，不显示该展开图标或加号。这是一个已知的错误，作者表示将会修复。

希望这有帮助。