使数据表响应

Making DataTables responsive

本文关键字:响应 数据表      更新时间:2023-09-26

环境: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();
        }
    });