从2.2.1中升级到jquery-datatables-rails 2.2.3，在RailsCasts 340 Datatables中断代码 [英] Upgrade to jquery-datatables-rails 2.2.3 from 2.2.1 breaks code in RailsCasts 340 Datatables
问题描述
我使用RailsCast 340构建DataTables。他们工作得很好，但是我有一些与列宽度相对于表宽度的困难。请参阅可数据列延伸过表边界，或太窄一般来说，将jquery-datatables-rails从2.2.1升级到2.2.3似乎是一个好主意，从DataTables 1.9升级到1.10。这还包括响应0.2.0的数据表。
参考转换DataTable 1.10的参数名称，您会看到有变化名称的变化。它们应该向下兼容到1.9。如果您使用本地数据表，可能是这种情况。但是，它不适用于jquery-datatables-rails，特别是参考 RailsCasts 340 。
这个问题和答案是试图缓解任何人的转换，最初可能会更容易实现此代码。
我将发布一些应该有助于解决这些问题的代码。首先，我与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：数据
}
end
1.10代码：
def as_json（options = {}）
{
draw：params [：draw] .to_i，
recordsTotal： Car.count，
recordsFiltered：cars.total_entries，
data：data
}
其他更改在params列表中，所以应该更清楚。
params [：搜索] [：value]替换params [：sSearch]
params [：start]替换params [：iDisplayStart]
par ams [：length]替换params [：iDisplayLength]
params [：order] ['0'] [：column]替换params [：iSortCol_0]
params [：order] ['0'] [ ：dir]替换params [：sSortDir_0]
JQuery初始化逻辑可能很复杂，特别是对于几个表。我将提交这个作为我所提到的宝石的例子。它显示了两个表的初始化，尽管我有更多。第二个表使用Ajax，允许服务器为每个页面动态提供数据。我的表也是响应，使用响应的数据表的宝石。所以，这只是一个新变量名的示例。
$（document）.ready（function（）{
var breakpointDefinition，tableElement;
var rHelperData，rHelperCar;
rHelperData = void 0;
rHelperCar = void 0;
breakpointDefinition = {
tablet：1300，
电话：480
};
tableElement = $（＃datatable）;
tableElement.dataTable（{
respond：true，
autoWidth：false ，
pagingType：full，
jQueryUI：true，
preDrawCallback：function（）{
if（！rHelperData）{
rHelperData = new ResponsiveDatatablesHelper（tableElement，断点定义）;
}
}，
rowCallback：function（nRow）{
rHelperData.createExpandIcon（nRow）;
}，
drawCallback：function oSettings）{
rHelperData.respond（）;
}
}）;
tableElement = $（＃carstable）;
tableElement.dataTable（{
respond：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有一个扩展图标的错误。应在几天内固定。扩展图标是一只奇怪的鸭子。当响应表格太窄而无法显示行中的所有单元格时，您可以隐藏一些单元格。当发生这种情况时，每行的开头应出现加号。加号是展开图标。如果您单击它，则会显示该行中的所有单元格。目前，该展开图标或加号不显示。这是一个已知的错误，作者已经说了将修复。
希望这有帮助。
This is informational, in that I am posing the question and will provide the answer. It's for the record and to help anyone that follows me here.
I build DataTables using RailsCasts 340. They worked great, but I had some struggles with it with column width versus table width and such. See Datatable rows extend past table boundary, or are too narrow. In general, it seemed to be a good idea to upgrade jquery-datatables-rails from 2.2.1 to 2.2.3 to get from DataTables 1.9 to 1.10. This also includes datatables-responsive 0.2.0.
Referring to Converting parameter names for DataTables 1.10, you'll see that there are non-breaking variable name changes. They are supposed to be backward-compatible to 1.9. If you are using native DataTables, that may be the case. But, it isn't for jquery-datatables-rails, especialy in reference to RailsCasts 340.
This question and answer is an attempt to ease that conversion for anyone coming along, and it may make it easier to implement this code initially.
I'm going to post some code that should help resolve these issues. First, my discussion with Allan, author of DataTables, should be helpful though not all the detail is included.
DataTables upgrade from 1.9 to 1.10 has some conversion issues. Again, they should be non-breaking except I am using jquery-datatables-rails and RailsCasts 340.
Refer to RailsCasts/AsciiCasts 340 to understand what follows. I am pulling code from my application, so its not a one-to-one match and you need to understand that tutorial.
The as_json call changes as follows, in terms of variable names.
DataTables 1.9 code:
def as_json(options = {})
{
sEcho: params[:sEcho].to_i,
iTotalRecords: Car.count,
iTotalDisplayRecords: cars.total_entries,
aaData: data
}
end
1.10 code:
def as_json(options = {})
{
draw: params[:draw].to_i,
recordsTotal: Car.count,
recordsFiltered: cars.total_entries,
data: data
}
The other changes are in the "params" list, so they should be more clear.
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 initialization logic can be complex, especially for several tables. I will submit this as my example for the mentioned gems. It shows initialization for two tables, though I have more. The second tables uses Ajax, allowing the server to provide the data dynamically for each page. My tables are also responsive, using the datatables-responsive gem. So, this is just a sample with the new variable names.
$(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();
}
});
});
Those are changes that I am using. There may be more, but you can see where this is going. You can refer to the core jquery-datatables-rails code.
I had one gotcha in RailsCasts 340. I was converting a working partial to use DataTables. To do that, I needed to remove all td elements, as they are defined and displayed dynamically.
Also, I'll mention that, as of today, jquery-datatables-rails 2.2.3 has a bug with the expand icon. It should be fixed within days. The expand icon is a strange duck. When a responsive table is too narrow to display all the cells in a row, you can hide some cells. When that happen, a plus sign should appear at the beginning of each row. The plus sign is the expand icon. If you click on it, all cells within that row are displayed. Currently, that expand icon, or the plus sign, does not display. It's a known bug that the author has said will be fixed.
Hope this helps.
这篇关于从2.2.1中升级到jquery-datatables-rails 2.2.3，在RailsCasts 340 Datatables中断代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
