[英]Making DataTables responsive
環境:Ruby 2.0.0,Rails 4.0.3,Windows 8.1 Update,jquery-datatables-rails 2.2.1,jquery-ui-rails 5.0.0,jquery-rails 3.1.1
我已經啟動並運行了DataTables,但是我需要使表具有響應能力。 我對這樣做的指示感到困惑。 我寫了一些JavaScript,但沒有寫Coffee。 無論哪種方式,我都不確定該怎么辦。
jquery-datatables-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();
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.