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

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

我使用RailsCasts 340构建了DataTables。它们运行得很好，但是我对它有一些与列宽和表宽等有关的问题。 请参见数据表行扩展超过表边界，或者太窄 。 一般来说，将jquery-datatables-rails从2.2.1升级到2.2.3以从DataTables 1.9升级到1.10似乎是个好主意。 这还包括数据表响应0.2.0。

参考转换DataTables 1.10的参数名称 ，您将看到有不间断的变量名称更改。 它们应该向后兼容1.9。 如果您使用的是本机DataTable，则可能就是这种情况。 但是，它不适用于jquery-datatables-rails，特别是对RailsCasts 340的引用。

这个问题和答案是尝试为任何人来简化转换，并且最初可能更容易实现此代码。

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

DataTables从1.9升级到1.10有一些转换问题 。 同样，它们应该是非破坏性的，除了我使用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(); } }); });

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

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

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

希望这可以帮助。

Interesting Posts