是否为数据表提供了响应响应式扩展程序更改事件?

时间:2019-06-29 12:42:02

标签: jquery datatable jquery-select2

我正在使用jQuery数据表更新基于服务器的数据。但是我在这方面面临问题。

这是我的应用程序的桌面/大视图。

desktop version

这是我的应用程序的移动视图

enter image description here

我面临的问题是,由于此datepicker(到期日期字段)和select2(代理字段)可以使数据表克隆行元素(例如输入框,select2,datepicker),并在扩展行时重写它不重新初始化。我试图在数据表文档中查找行事件的展开/折叠事件,但没有得到任何答案。我尝试了自定义的Jquery点击事件,但又失败了。

这是我的数据表代码

<table id="document_expiry_table" class="table table-striped table-bordered table-hover bv-form" width="100%">
 <thead>
   <tr>
     <th width="5%" data-class="expand">Srl.</th>
     <th width="15%">Document Name</th>
     <th width="25%" data-hide="phone">Agency</th>
     <th width="15%" data-hide="phone">Renewal Amount</th>
     <th width="15%" data-hide="phone">Expiry Date</th>
     <th width="25%" data-hide="phone">Document Description</th>
   </tr>
 </thead>

<script>
$('#document_expiry_table').dataTable({
    destroy: true,
    "bPaginate": false,
    "sDom": "<'dt-toolbar'<'col-xs-6 col-sm-6 col-md-6'f><'col-xs-6 col-sm-6 col-md-6 button-bar'>",
    "preDrawCallback" : function() {
      $("#document_expiry_table input.service_provider_id").select2('destroy'); 
      if (!document_expiry_datatable_col_reorder) {
        document_expiry_datatable_col_reorder = new ResponsiveDatatablesHelper($('#document_expiry_table'), breakpointDefinition);
      }
    },
    "rowCallback" : function(nRow, data, index) {
      document_expiry_datatable_col_reorder.createExpandIcon(nRow);
      $(nRow).addClass(data['tr_class']);
    },
    "drawCallback" : function(oSettings) {
      initSelect2("#document_expiry_table input.service_provider_id", "<?php echo site_url('masters/party_master/json_search'); ?>", {party_type: ['service_provider'], placeholder: 'SELECT SERVICE PROVIDER'});
      $('#document_expiry_table input.datepicker').datepicker();
      $('#document_expiry_table input.datepicker').mask('99/99/9999');
      document_expiry_datatable_col_reorder.respond();
    },
    renderer: function (api, rowIdx, columns) {
      alert('hello');
    },
    "ajax":{
      url :"<?php echo site_url('vehicles/document_expiry_json/'.$vehicle_detail['id']); ?>",
      type: "POST",
      error: function(){
        $("#post_list_processing").css("display","none");
      }
    }    
  });
</script>

initSelect2()只是我创建的用于初始化select2的自定义函数。

这是我尝试过的

$(document).on('click', '.responsiveExpander', function(){
  alert('hello');
});

enter image description here

0 个答案:

没有答案