我正在使用jQuery数据表更新基于服务器的数据。但是我在这方面面临问题。
这是我的应用程序的桌面/大视图。
这是我的应用程序的移动视图
我面临的问题是,由于此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');
});