ReponsiveExpander изменить событие для данных? - PullRequest
Новая
       4

ReponsiveExpander изменить событие для данных?

0 голосов
/ 29 июня 2019

Я использую datatable для jQuery для обновления данных на моем сервере.Однако я сталкиваюсь с проблемами в этом.

Это рабочий стол / большой вид моего приложения.

desktop version

Это мобильный вид моего приложения

enter image description here

проблема, с которой я сталкиваюсь, заключается в том, что datatable делает клон элементов (таких как поле ввода, select2, datepickers) строк и переписывает это при расширении строки из-за этого средства выбора даты(поле даты истечения срока действия) и select2 (поле агентства) не могут быть повторно инициализированы.я попытался найти событие разворачивания / коллапса события строк в документации по датам, но не получил никакого ответа.Я попытался настроить событие нажатия 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

...