datatable fixed checkbox

This commit is contained in:
2023-10-20 14:24:41 +07:00
parent 514e957cd8
commit dbac2810f8
+65 -59
View File
@@ -788,9 +788,12 @@ Request.JSONF = function(options){//oke
aSortCol.push((val.s ? { "orderDataType": val.s } : null)); aSortCol.push((val.s ? { "orderDataType": val.s } : null));
}); });
if (ini.option.length > 0) { if (ini.option.length > 0) {
var strAksi = 'Aksi'; var strAksi = 'Aksi', ChkField = '';
$.each(ini.option, function(key, val){ $.each(ini.option, function(key, val){
if (val.type == 'checkbox') strAksi = '<input type="checkbox" id="'+ini.id+'_cbhead_'+val.field+'" value="'+val.avalue[1]+'">'; if (val.type == 'checkbox'){
strAksi = '<input type="checkbox" id="'+ini.id+'_cbhead_'+val.field+'" value="'+val.avalue[1]+'">';
ChkField = val.field;
}
if (val.type == 'button') aTombol[val.icon] = val.label; if (val.type == 'button') aTombol[val.icon] = val.label;
}); });
strHead += '<th data-class-name="c">'+strAksi+'</th>'; strHead += '<th data-class-name="c">'+strAksi+'</th>';
@@ -841,7 +844,7 @@ Request.JSONF = function(options){//oke
}) })
} }
if (val[0].checkbox) { if (val[0].checkbox) {
_tbtn1 += '<div><input class="form-check-input" type="checkbox" id="_cbox_'+val[0].checkbox.field+'" value="'+val[0].checkbox.value+'"></div>'; _tbtn1 += '<div><input class="form-check-input" type="checkbox" id="'+ChkField+'_cbox_'+val[0].checkbox.field+'" value="'+val[0].checkbox.value+'"></div>';
} }
strBody += '<td class="">'+_tbtn1+_tbtn2+'</td>'; strBody += '<td class="">'+_tbtn1+_tbtn2+'</td>';
} }
@@ -850,7 +853,7 @@ Request.JSONF = function(options){//oke
strBody += '</tbody>'; strBody += '</tbody>';
$(divData).append(strTab + strHead + strBody + strFoot + '</table>'); $(divData).append(strTab + strHead + strBody + strFoot + '</table>');
var opsi = { responsive: true, columnDefs: [{responsivePriority:1,targets:0},{responsivePriority:2,targets:1}], lengthMenu: [], dom: '<"row"<"col-sm-12"tr>><"row"<"col-sm-12 col-lg-auto"<"toolbar">><"col-sm-3 col-lg-auto ms-lg-auto"l><"col-sm-9 col-lg-auto"p>>', autoWidth: false, processing: true, searching: false, columns: aSortCol, order: [[iCol, (ini.config.sort_dir=='A'?'asc':'desc')]], pageLength: ini.config.row_count, stateSave: true, stateSaveCallback: function(sett,data){localStorage.setItem(ini.id,JSON.stringify(data));}, stateLoadCallback: function(sett){try{return JSON.parse(localStorage.getItem(ini.id));}catch(e){}} }; var opsi = { responsive: true, columnDefs: [{responsivePriority:1,targets:0},{responsivePriority:2,targets:1}], lengthMenu: [], dom: '<"row"<"col-sm-12"tr>><"row"<"col-sm-12 col-lg-auto"<"toolbar">><"col-sm-3 col-lg-auto ms-lg-auto"l><"col-sm-9 col-lg-auto"p>>', autoWidth: false, processing: true, searching: false, columns: aSortCol, order: [[iCol, (ini.config.sort_dir=='A'?'asc':'desc')]], pageLength: ini.config.row_count, stateSave: true, stateSaveCallback: function(sett,data){localStorage.setItem(ini.id,JSON.stringify(data));}, stateLoadCallback: function(sett){try{var data=JSON.parse(localStorage.getItem(ini.id));data.length=ini.config.row_count;return data;}catch(e){}} };
/*****/ /*****/
if (ini.config.live){ if (ini.config.live){
var post_data = {}; var post_data = {};
@@ -895,7 +898,7 @@ Request.JSONF = function(options){//oke
}) })
} }
if (optval.checkbox) { if (optval.checkbox) {
_tbtn1 += '<div><input class="form-check-input" type="checkbox" id="_cbox_'+optval.checkbox.field+'" value="'+optval.checkbox.value+'"></div>'; _tbtn1 += '<div><input class="form-check-input" type="checkbox" id="'+ChkField+'_cbox_'+optval.checkbox.field+'" value="'+optval.checkbox.value+'"></div>';
} }
jsono.data[key].push(_tbtn1+_tbtn2); jsono.data[key].push(_tbtn1+_tbtn2);
} }
@@ -915,13 +918,14 @@ Request.JSONF = function(options){//oke
opsi.scroller = { loadingIndicator: true }; opsi.scroller = { loadingIndicator: true };
} }
var _navibar = '';
if (ini.navi.button) { if (ini.navi.button) {
var _dis = '', _bcss = 'btn-info'; var _dis = '', _bcss = 'btn-info';
if (ini.config.nobutton === true){ if (ini.config.nobutton === true){
_dis = ' disabled=true'; _dis = ' disabled=true';
_bcss = 'btn-secondary'; _bcss = 'btn-secondary';
} }
var _navibar = '<div class="row"><div class="col">'; _navibar += '<div class="row"><div class="col">';
$.each(ini.navi.button, function(key, val){ $.each(ini.navi.button, function(key, val){
_navibar += '<button type="button" class="btn rounded-pill '+_bcss+' me-2"'+_dis+' onclick="'+val.func+'();">'+val.label+'</button>'; _navibar += '<button type="button" class="btn rounded-pill '+_bcss+' me-2"'+_dis+' onclick="'+val.func+'();">'+val.label+'</button>';
}); });
@@ -931,13 +935,16 @@ Request.JSONF = function(options){//oke
if (ini.navi.button) $('#'+ini.id+'Tabel_wrapper div.toolbar').html(_navibar); if (ini.navi.button) $('#'+ini.id+'Tabel_wrapper div.toolbar').html(_navibar);
} }
opsi.drawCallback = function(settings){ opsi.drawCallback = function(settings){
// apply rowcss to tr/row
$('#'+ini.id+'Tabel tbody td:last-child:has(span.rowcss)').each(function(){ $('#'+ini.id+'Tabel tbody td:last-child:has(span.rowcss)').each(function(){
var span = $(this).find('span').attr('class').replace('rowcss ',''); var span = $(this).find('span').attr('class').replace('rowcss ','');
$(this).parent().addClass(span); $(this).parent().addClass(span);
}); });
// create hover title for awr class td
$('#'+ini.id+'Tabel tbody td.awr').each(function(){ $('#'+ini.id+'Tabel tbody td.awr').each(function(){
$(this).attr('title', $(this).html().replace(/<br\s*[\/]?>/gi,'\n').replace(/(<([^>]+)>)/gi,'')); $(this).attr('title', $(this).html().replace(/<br\s*[\/]?>/gi,'\n').replace(/(<([^>]+)>)/gi,''));
}); });
// generate pagelength option
var api = this.api(), menudiv = $('select[name="'+ini.id+'Tabel_length"]'); var api = this.api(), menudiv = $('select[name="'+ini.id+'Tabel_length"]');
var record = api.page.info().recordsTotal ?? 0, _lmenu = []; var record = api.page.info().recordsTotal ?? 0, _lmenu = [];
$.each([10,25,50], function(key, val){ $.each([10,25,50], function(key, val){
@@ -953,66 +960,65 @@ Request.JSONF = function(options){//oke
$('<option/>', {'value':val, 'text':val}).appendTo(menudiv); $('<option/>', {'value':val, 'text':val}).appendTo(menudiv);
}); });
menudiv.val(_select); menudiv.val(_select);
} // apply select function
if (ini.config.func_select) {
var otabel = $('#'+ini.id+'Tabel').DataTable(opsi); $('#'+ini.id+'Tabel tbody').on('click', 'tr', function(){
if (ini.config.func_select) { var dta = otabel.row(this).data();
$('#'+ini.id+'Tabel tbody').on('click', 'tr', function(){ var fnc = ini.config.func_select.split('.');
var dta = otabel.row(this).data(); if (typeof window[fnc[0]][fnc[1]] === 'function') { window[fnc[0]][fnc[1]](dta); }
var fnc = ini.config.func_select.split('.'); else console.warn('fungsi '+ini.config.func_select+' tidak ada !');
if (typeof window[fnc[0]][fnc[1]] === 'function') { window[fnc[0]][fnc[1]](dta); } });
else console.warn('fungsi '+ini.config.func_select+' tidak ada !'); }
}); // apply option of record / row
} if (ini.option.length > 0) {
if (ini.option.length > 0) { $('#'+ini.id+'Tabel thead input[type=checkbox][id*=_cbhead_]').off('change');
$.each(ini.option, function(key, val){ $('#'+ini.id+'Tabel tbody input[type=checkbox][id*=_cbox_]').off('change');
if (val.type == 'checkbox'){ $('#'+ini.id+'Tabel tbody').off('click');
$('#'+ini.id+'Tabel thead input[type=checkbox][id*=_cbhead_]').each(function(){ $.each(ini.option, function(key, val){
$(this).on('change', function(){ if (val.type == 'checkbox'){
_chek = this.checked; $('#'+ini.id+'Tabel thead input[type=checkbox][id*=_cbhead_]').on('change', function(){
var _chek = this.checked;
this.value = (this.checked ? val.avalue[0] : val.avalue[1]); this.value = (this.checked ? val.avalue[0] : val.avalue[1]);
$('#'+ini.id+'Tabel tbody input[type=checkbox][id*='+val.field+'_cbox_]').each(function(){ $('#'+ini.id+'Tabel tbody input[type=checkbox][id*='+val.field+'_cbox_]').each(function(){
this.checked = _chek; this.checked = _chek;
this.value = (this.checked ? val.avalue[0] : val.avalue[1]); this.value = (this.checked ? val.avalue[0] : val.avalue[1]);
}); });
}); });
}); $('#'+ini.id+'Tabel tbody input[type=checkbox][id*=_cbox_]').on('change', function(){
$('#'+ini.id+'Tabel tbody input[type=checkbox][id*=_cbox_]').each(function(){ this.value = (this.value == val.avalue[1] ? val.avalue[0] : val.avalue[1]);
this.id = val.field + this.id; this.checked = this.value == val.avalue[0];
this.checked = this.value==val.avalue[0]; });
$(this).on('change', function(){ } else if (val.type == 'button'){
this.value = (this.checked ? val.avalue[0] : val.avalue[1]); if (val.icon == 'fon-tabel-dt') {
}); $('#'+ini.id+'Tabel tbody').on('click', '.fon-tabel-dt', function(){
}); var tr = $(this).closest('tr');
} else if (val.type == 'button'){ var row = otabel.row(tr);
if (val.icon == 'fon-tabel-dt') { if (row.child.isShown()){
$('#'+ini.id+'Tabel tbody').on('click', '.fon-tabel-dt', function(){ row.child.hide();
var tr = $(this).closest('tr'); tr.removeClass('shown');
var row = otabel.row(tr); }else{
if (row.child.isShown()){ var fnc = val.func.split('.');
row.child.hide(); if (typeof window[fnc[0]][fnc[1]] === 'function'){
tr.removeClass('shown'); var _dt_id = $('<div id="TD_Fonia_' + parseInt(Math.random() * 99999999) + '" />');
}else{ row.child(_dt_id).show();
tr.addClass('shown');
window[fnc[0]][fnc[1]](row.data(), _dt_id);
} else console.warn('fungsi '+val.func+' tidak ada !');
}
});
} else {
$('#'+ini.id+'Tabel tbody').on('click', '.'+val.icon, function(){
var dta = otabel.row($(this.closest('tr'))).data();
var fnc = val.func.split('.'); var fnc = val.func.split('.');
if (typeof window[fnc[0]][fnc[1]] === 'function'){ if (typeof window[fnc[0]][fnc[1]] === 'function') { window[fnc[0]][fnc[1]](dta, this); }
var _dt_id = $('<div id="TD_Fonia_' + parseInt(Math.random() * 99999999) + '" />'); else console.warn('fungsi '+val.func+' tidak ada !');
row.child(_dt_id).show(); });
tr.addClass('shown'); }
window[fnc[0]][fnc[1]](row.data(), _dt_id);
} else console.warn('fungsi '+val.func+' tidak ada !');
}
});
} else {
$('#'+ini.id+'Tabel tbody').on('click', '.'+val.icon, function(){
var dta = otabel.row($(this.closest('tr'))).data();
var fnc = val.func.split('.');
if (typeof window[fnc[0]][fnc[1]] === 'function') { window[fnc[0]][fnc[1]](dta, this); }
else console.warn('fungsi '+val.func+' tidak ada !');
});
} }
} });
}); }
} }
var otabel = $('#'+ini.id+'Tabel').DataTable(opsi);
}; };
this.construct(options); this.construct(options);
}; };
@@ -1130,4 +1136,4 @@ if (jQuery.fn.dataTable) {
"sDecimal": ",", "sDecimal": ",",
"sThousands": "." "sThousands": "."
}); });
} }