使数据表响应
Making DataTables responsive
环境:Ruby 2.0.0, Rails 4.0.3, Windows 8.1 Update, jquery-datatable - Rails 2.2.1, jquery-ui-rails 5.0.0, jquery-rails 3.1.1
我有数据表启动和运行,但我需要使我的表响应。我对这样做的指示感到困惑。我写过一些JavaScript,但没有写过Coffee。不管怎样,我都不知道该怎么办。
jquery-datatable -rails指令说:
5 - Initialize your datatables using:
responsiveHelper = undefined
breakpointDefinition =
tablet: 1024
phone: 480
tableElement = $("#example")
tableElement.dataTable
autoWidth: false
preDrawCallback: ->
# Initialize the responsive datatables helper once.
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition) unless responsiveHelper
return
rowCallback: (nRow) ->
responsiveHelper.createExpandIcon nRow
return
drawCallback: (oSettings) ->
responsiveHelper.respond()
return
我现在这样初始化我的表:
$(document).ready(function () {
// Enable any datatables
$('#datatable').dataTable({
"sPaginationType": "full_numbers",
bJQueryUI: true
});
$('#carstable').dataTable({
"sPaginationType": "full_numbers",
bJQueryUI: true,
bProcessing: true,
bServerSide: true,
sAjaxSource: $('#carstable').data('source')
});
我使用compileonline.com生成JavaScript:
(function() {
var breakpointDefinition, responsiveHelper, tableElement;
responsiveHelper = void 0;
breakpointDefinition = {
tablet: 1024,
phone: 480
};
tableElement = $("#example");
tableElement.dataTable({
autoWidth: false,
preDrawCallback: function() {
if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
}
},
rowCallback: function(nRow) {
responsiveHelper.createExpandIcon(nRow);
},
drawCallback: function(oSettings) {
responsiveHelper.respond();
}
});
}).call(this);
但是我不知道该怎么把它集成到当前的JavaScript初始化器中
长时间盯着代码有时可以解决问题…我让它基本工作,虽然我需要定制它。替换代码如下:
$(document).ready(function() {
var breakpointDefinition, responsiveHelper, tableElement;
responsiveHelper = void 0;
breakpointDefinition = {
tablet: 1024,
phone: 480
};
tableElement = $("#datatable");
tableElement.dataTable({
autoWidth: false,
"sPaginationType": "full_numbers",
bJQueryUI: true,
preDrawCallback: function() {
if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
}
},
rowCallback: function(nRow) {
responsiveHelper.createExpandIcon(nRow);
},
drawCallback: function(oSettings) {
responsiveHelper.respond();
}
});
tableElement = $("#carstable");
tableElement.dataTable({
autoWidth: false,
"sPaginationType": "full_numbers",
bJQueryUI: true,
bProcessing: true,
bServerSide: true,
sAjaxSource: $('#carstable').data('source'),
preDrawCallback: function() {
if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
}
},
rowCallback: function(nRow) {
responsiveHelper.createExpandIcon(nRow);
},
drawCallback: function(oSettings) {
responsiveHelper.respond();
}
});
相关文章:
- 如何在数据表中设置从Ajax响应选中的复选框
- Laravel数据表无效的JSON响应
- 基于类的单击事件在10行之后不响应-数据表
- 引导程序 3 折叠面板中的 Jquery 数据表响应插件
- 需要使固定宽度的数据表具有响应性
- [ jQuery/Datatable ]:数据表无响应,禁用输入搜索
- FooTable的分页:一个用于响应式数据表的jQuery插件
- 如何获取ajax响应数组的密钥以建立数据表的标头
- 对json响应使用jquery数据表
- 将ajax响应加载到数据表中
- 数据表响应-显示和隐藏列
- 如何使Bootstrap jQuery数据表响应和增加/减少滚动条高度根据页面的大小
- 使数据表响应
- 响应模式下的数据表ng-click不起作用
- 使用数据表呈现多维嵌套JSON响应
- 响应式数据表和引导标签的问题
- jQuery数据表响应按钮
- 使用JSON响应的数据表
- 数据表列可见性与响应扩展
- 如何将另一个子项添加到响应数据表中