2

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

我使用 RailsCasts 340 构建 DataTables。它们工作得很好，但我在列宽与表格宽度等方面遇到了一些困难。请参阅数据表行超出表边界，或太窄。一般来说，将 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 时。

这个问题和答案试图为任何出现的人简化这种转换，并且它可能使最初实现此代码更容易。

4

1 回答 1

2

我将发布一些有助于解决这些问题的代码。首先，我与 DataTables 的作者 Allan 的讨论应该会有所帮助，尽管没有包括所有细节。

DataTables 从 1.9 升级到 1.10 有一些转换问题。同样，它们应该是不间断的，除非我使用的是 jquery-datatables-rails 和 RailsCasts 340。

请参阅RailsCasts/AsciiCasts 340以了解以下内容。我正在从我的应用程序中提取代码，因此它不是一对一的匹配，您需要了解该教程。

as_json 调用根据变量名进行如下更改。

数据表 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，允许服务器为每个页面动态提供数据。我的表也是响应式的，使用 datatables-responsive 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();
        }
    });
});

这些是我正在使用的更改。可能还有更多，但你可以看到这是怎么回事。您可以参考核心 jquery-datatables-rails 代码。

我在 RailsCasts 340 中遇到了一个问题。我正在将工作部分转换为使用 DataTables。为此，我需要删除所有 td 元素，因为它们是动态定义和显示的。

另外，我会提到，截至今天，jquery-datatables-rails 2.2.3 有一个带有展开图标的错误。它应该在几天内修复。展开图标是一只奇怪的鸭子。当响应式表格太窄而无法在一行中显示所有单元格时，您可以隐藏一些单元格。发生这种情况时，每行的开头应出现一个加号。加号是展开图标。如果单击它，则会显示该行中的所有单元格。目前，该展开图标或加号不显示。这是一个已知的错误，作者说将被修复。

希望这可以帮助。

于 2014-10-02T21:58:53.217 回答