Question

我似乎无法使我的数据表响应工作。我尝试过使用cdn的多种解决方案，更改表格宽度，添加表格响应，将加号的位置更改为左边等等。

奇怪的是，如果我运行$("table.dataTable").resize();，它会在第二次绘制表时起作用我想在ajax调用结束时调用它，但这会导致堆栈溢出，因为它几乎是在循环中。以下是我定义数据表的方法。

HTML：

<div class="col-md-12 col-sm-12 col-xs-12" id="listView">
  <table id="tabela" class="table table-striped table-bordered table-hover table-responsive">
    <thead>
      <tr>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>FILL</th>
        <th>Ações</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

以下是我在javascript（使用jquery适配器）

中初始化它的方法

JS：

tabelaGlobal = $("#tabela").DataTable({
   responsive: true,
   processing: true,
   serverSide: true,
   info: true,
   ajax: {
      url: routeListInfo,
      method: "POST",
      data: function (data) {
         data.search = typeof tabelaGlobal !== "undefined" ? tabelaGlobal.search() : "";
         delete data.columns;
      }
   },
   "lengthChange": true,
   "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
   "language": {
      "lengthMenu": "_MENU_ linhas por página",
      "zeroRecords": "Desculpe nada encontrado...",
      "info": "Pagina _PAGE_ de _PAGES_",
      "infoEmpty": "",
      "processing": "",
      "search": "Procurar:",
      "emptyTable": "",
      "paginate": {
        "first": "Primeiro",
        "last": "Último",
        "next": "Próximo",
        "previous": "Anterior"
      },
      "infoFiltered": ""
   },
    columns: [
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            return "I am here with the purpose of being waaaaaaaaaaaay to big for this";
         }
       },
       {
         "render": function (data, type, full, meta) {
            var spanEditar = document.createElement('span');
            $(spanEditar)
               .addClass("btn btn-primary btn-xs")
               .css('color', 'white')
               .css('cursor', 'pointer')
               .html('<i class="fa fa-pencil" aria-hidden="true"></i>')
               .attr("onClick", 'openEdit(\'' + full.id + '\')');

             var spanApagar = document.createElement('span');
             $(spanApagar)
               .addClass("btn btn-danger btn-xs")
               .css('color', 'white')
               .css("background-color", "#dd4b39")
               .css('cursor', 'pointer')
               .html('<i class="fa fa-times" aria-hidden="true"></i>')
               .attr("onClick", 'openDelete(\'' + full.id + '\')');

                return $(spanEditar).clone().wrap('<div/>').parent().html() + $(spanApagar).clone().wrap('<div/>').parent().html();
         }
      },

     ],
   "autoWidth": true,
   "order": [[0, "desc"]],
   "fnDrawCallback": function (result) {
      //$("table.dataTable").resize();
       global_resultado = result.json.data;
    },
    iDisplayStart: iDisplayStart,
});

我尽力缩进代码，但它从不像文本编辑器或ide ^^。

更新：经过一段时间解决修复的问题后，我注意到问题可能在于需要渲染的时间以及“重新调整”列的时间。

setTimeout(function(){
   tabelaGlobal.columns.adjust().responsive.recalc();
},1000)

我让这个工作，但我发现它不是一个真正的答案。将继续努力寻找一种更清洁的方式

Answer 1

在我看来，这绝不是正确答案，但这是一种解决方法。由于我正在使用速度，每当步伐结束时，我检查数据表是否已初始化，如果是，则调整列。喜欢这个

static Class class = .......

仍然会感谢一个更好，更值得信赖的答案，所以如果有人还有想法的话。感谢

Answer 2

这可能有帮助

let date = "2020-06-25";
let time = "13:45";
let timezoneEST = "America/New_York";
let timezoneCST = "America/Chicago";
let currentTime = moment().tz(moment.tz.guess());

let eventTimeEST = moment.tz(moment(date).set({ "hour": time.substring(0, 2), "minute": time.substring(3, 5) }), timezoneEST);
let eventTimeCST = moment.tz(moment(date).set({ "hour": time.substring(0, 2), "minute": time.substring(3, 5) }), timezoneCST);

timeDiff = moment([eventTimeEST or eventTimeCST]).diff(currentTime)
 if (timeDiff > 0) {
   // allow submit
 }


console.log(eventTimeEST)
// Eastern Zone Moment Object
// {
//   _isAMomentObject: true
//   _d: Thu Jun 25 2020 09: 45: 00 GMT - 0400(Eastern Daylight Time)
//   _i: Thu Jun 25 2020 00: 00: 00 GMT - 0400(Eastern Daylight Time)
//   _isAMomentObject: true
//   _isUTC: true
//   _isValid: true
//   _locale: Locale { _calendar: { … }, _longDateFormat: { … }, _invalidDate: "Invalid date", _dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, ordinal: ƒ, … }
//   _offset: -240
//   _pf: { empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, … }
//   _z: Zone { name: "America/New_York", abbrs: Array(236), untils: Array(236), offsets: Array(236), population: 21000000 }
// }

console.log(eventTimeCST)
// Central Zone Moment Object
// {
//   _isAMomentObject: true
//   _d: Thu Jun 25 2020 08: 45: 00 GMT - 0400(Eastern Daylight Time)
//   _i: Thu Jun 25 2020 00: 00: 00 GMT - 0400(Eastern Daylight Time)
//   _isAMomentObject: true
//   _isUTC: true
//   _isValid: true
//   _locale: Locale { _calendar: { … }, _longDateFormat: { … }, _invalidDate: "Invalid date", _dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, ordinal: ƒ, … }
//   _offset: -240
//   _pf: { empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, … }
//   _z: Zone { name: "America/New_York", abbrs: Array(236), untils: Array(236), offsets: Array(236), population: 21000000 }
// }

console.log(currentTime)
// Current Time(EST) Moment Object
// {
//   _d: Thu Jun 25 2020 09: 00:  GMT - 0400(Eastern Daylight Time)
//   _isAMomentObject: true
//   _isUTC: true
//   _isValid: true
//   _locale: Locale { _calendar: { … }, _longDateFormat: { … }, _invalidDate: "Invalid date", _dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, ordinal: ƒ, … }
//   _offset: -240
//   _pf: { empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, … }
//   _z: Zone { name: "America/New_York", abbrs: Array(236), untils: Array(236), offsets: Array(236), population: 21000000 }
//   __proto__: Object
// }

因此，在您的情况下，它将更改为此

$('#table-id').dataTable({
    "autoWidth": false
});

这解决了第一次加载时表格宽度不正确的问题。可能会有所帮助。

响应数据表不能第一次工作

2 个答案: