这是提供信息的,因为我提出了问题并将提供答案。这是为了记录问题,并为在此跟随我的任何人提供帮助。

我使用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。如果使用的是本机DataTable,则可能是这种情况。但是,它不是针对jquery-datatables-rails的,特别是对于RailsCasts 340的引用。

这个问题和答案是试图简化所有人的转换,并可能使最初实现此代码更容易。

最佳答案

我将发布一些有助于解决这些问题的代码。首先,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,允许服务器为每个页面动态提供数据。我的表也使用响应数据表的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。应该在几天之内解决。展开图标是一只奇怪的鸭子。当响应表太窄而无法连续显示所有单元格时,您可以隐藏一些单元格。发生这种情况时,应在每行的开头显示一个加号。加号是展开图标。如果单击它,将显示该行内的所有单元格。当前,该扩展图标或加号不显示。这是作者已解决的已知错误。

希望这可以帮助。

10-08 13:50
查看更多