这是提供信息的,因为我提出了问题并将提供答案。这是为了记录问题,并为在此跟随我的任何人提供帮助。
我使用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。应该在几天之内解决。展开图标是一只奇怪的鸭子。当响应表太窄而无法连续显示所有单元格时,您可以隐藏一些单元格。发生这种情况时,应在每行的开头显示一个加号。加号是展开图标。如果单击它,将显示该行内的所有单元格。当前,该扩展图标或加号不显示。这是作者已解决的已知错误。
希望这可以帮助。