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

希望这会有所帮助。

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

1 个答案: