与服务器端处理一起使用时,数据未填充到固定列数据表中

时间:2018-11-25 20:28:32

标签: angular datatables

我正在角度项目中使用DataTable。当我将fixedColumns与serverSide处理一起使用时,将显示fixedColumns(重叠的列),但是没有数据。

当我在具有5000ms时间间隔的setTimeout函数中使用table.fixedColumns()。update()时,空行仍然显示,但没有数据。

空行数与原始列的行数匹配。

为什么数据不能像原始列那样显示在fixedColumns(重叠列)中?

下面是我的代码示例:

var table = $('#contactusdt').DataTable({
  pagingType: 'full_numbers',
  pageLength: 10,
  lengthMenu: [10, 25, 100],
  serverSide: true,
  processing: true,
  responsive: true,
  searching: false,
  language: {
    "search": '<i class="fa fa-search search-eye"></i>',
    searchPlaceholder: 'Name / Email',
    processing: '<span ><img src="assets/img/busy.gif" alt="Loading.."></span> ',
    paginate: {
      first: '&laquo;',
      last: '&raquo;',
      next: '&#8250;',
      previous: '&#8249;'
    }
  },
  drawCallback: function (oSettings) {
    this.show();
      var pgr = $(oSettings.nTableWrapper).find('.dataTables_paginate')
      if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
        pgr.hide();
      } else {
        pgr.show()
      }
  },
  "order": [[ 0, "desc" ]],
  "sDom": '<lfBptipr >',
  ajax: (dataTablesParameters: any, callback) => {
    var postPrams = this.getPostParameters("clsPostParam");        
    var date_from = this.getPostParameters("clsPostParam1");        
    var date_to = this.getPostParameters("clsPostParam2");        
    var custom_search = $('#search').val();
    dataTablesParameters.url = 'services_get_contact_details';
    dataTablesParameters.method = 'POST';
    dataTablesParameters.auth = localStorage.getItem('authkey');
    dataTablesParameters.data = {
      "condFilter": postPrams,
      "date_from": date_from,
      "date_to": date_to,
      "custom_search": custom_search
    };
    let jsondata = 'jsondata=' + JSON.stringify(dataTablesParameters);
    that.http
      .post<DataTablesResponse>(
        global.baseUrl,
        jsondata, { headers: headers }
      ).subscribe(resp => {
        if (resp) {
          this.contactDetails$ = resp['data'];
          $('.content-wrapper').removeClass('overlay');
        }
        callback({
          recordsTotal: resp.recordsTotal,
          recordsFiltered: resp.recordsFiltered,
          data: []
        });
      });
  },
  "columnDefs": [{
    "targets": 0,
    "orderable": false
  }, {
    "targets": 2,
    "orderable": false
  }, {
    "targets": 4,
    "orderable": false
  },
  {
    "targets": 5,
    "orderable": false
  },
  {
    "targets": 8,
    "orderable": false,
    "width": "20%"
  },
  {
    "targets": 9,
    "orderable": false
  }
  ],
  buttons: {
    dom: {
      button: {
        tag: 'button',
        className: ''
      }
    },
    buttons: [
      {
        text: '<i class="fa fa-repeat"></i>',
        action: function () {              
          $('#leadsource').val(null).trigger('change.select2');
          $('#leadstatus').val(null).trigger('change.select2');
          $('#c_start_date').val('');
          $('#c_end_date').val('');
          $('#search').val('');              
          that.reload();
        },
        className: ' btn btn-xs resetbtn'
      },          
    ]
  },
  scrollX:        true,
  scrollCollapse: true,
  paging:         true,  
  "initComplete": function (settings, json) {        
    var table = $('#contactusdt').dataTable().api();
    var fixedColumns = new $.fn.dataTable.FixedColumns( table, {
      leftColumns: 2,
      rightColumns: 2,
      heightMatch: 'none'
    } );
    //table.fixedColumns().update();
  }        
});
setTimeout( function() {
    var table = $('#contactusdt').DataTable();
    table.fixedColumns().update();          
}, 5000);

我的控制台没有看到任何错误。

DataTable Screenshot

0 个答案:

没有答案