datatable fixed checkbox
This commit is contained in:
+64
-58
@@ -788,9 +788,12 @@ Request.JSONF = function(options){//oke
|
||||
aSortCol.push((val.s ? { "orderDataType": val.s } : null));
|
||||
});
|
||||
if (ini.option.length > 0) {
|
||||
var strAksi = 'Aksi';
|
||||
var strAksi = 'Aksi', ChkField = '';
|
||||
$.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;
|
||||
});
|
||||
strHead += '<th data-class-name="c">'+strAksi+'</th>';
|
||||
@@ -841,7 +844,7 @@ Request.JSONF = function(options){//oke
|
||||
})
|
||||
}
|
||||
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>';
|
||||
}
|
||||
@@ -850,7 +853,7 @@ Request.JSONF = function(options){//oke
|
||||
strBody += '</tbody>';
|
||||
|
||||
$(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){
|
||||
var post_data = {};
|
||||
@@ -895,7 +898,7 @@ Request.JSONF = function(options){//oke
|
||||
})
|
||||
}
|
||||
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);
|
||||
}
|
||||
@@ -915,13 +918,14 @@ Request.JSONF = function(options){//oke
|
||||
opsi.scroller = { loadingIndicator: true };
|
||||
}
|
||||
|
||||
var _navibar = '';
|
||||
if (ini.navi.button) {
|
||||
var _dis = '', _bcss = 'btn-info';
|
||||
if (ini.config.nobutton === true){
|
||||
_dis = ' disabled=true';
|
||||
_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){
|
||||
_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);
|
||||
}
|
||||
opsi.drawCallback = function(settings){
|
||||
// apply rowcss to tr/row
|
||||
$('#'+ini.id+'Tabel tbody td:last-child:has(span.rowcss)').each(function(){
|
||||
var span = $(this).find('span').attr('class').replace('rowcss ','');
|
||||
$(this).parent().addClass(span);
|
||||
});
|
||||
// create hover title for awr class td
|
||||
$('#'+ini.id+'Tabel tbody td.awr').each(function(){
|
||||
$(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 record = api.page.info().recordsTotal ?? 0, _lmenu = [];
|
||||
$.each([10,25,50], function(key, val){
|
||||
@@ -953,66 +960,65 @@ Request.JSONF = function(options){//oke
|
||||
$('<option/>', {'value':val, 'text':val}).appendTo(menudiv);
|
||||
});
|
||||
menudiv.val(_select);
|
||||
}
|
||||
|
||||
var otabel = $('#'+ini.id+'Tabel').DataTable(opsi);
|
||||
if (ini.config.func_select) {
|
||||
$('#'+ini.id+'Tabel tbody').on('click', 'tr', function(){
|
||||
var dta = otabel.row(this).data();
|
||||
var fnc = ini.config.func_select.split('.');
|
||||
if (typeof window[fnc[0]][fnc[1]] === 'function') { window[fnc[0]][fnc[1]](dta); }
|
||||
else console.warn('fungsi '+ini.config.func_select+' tidak ada !');
|
||||
});
|
||||
}
|
||||
if (ini.option.length > 0) {
|
||||
$.each(ini.option, function(key, val){
|
||||
if (val.type == 'checkbox'){
|
||||
$('#'+ini.id+'Tabel thead input[type=checkbox][id*=_cbhead_]').each(function(){
|
||||
$(this).on('change', function(){
|
||||
_chek = this.checked;
|
||||
// apply select function
|
||||
if (ini.config.func_select) {
|
||||
$('#'+ini.id+'Tabel tbody').on('click', 'tr', function(){
|
||||
var dta = otabel.row(this).data();
|
||||
var fnc = ini.config.func_select.split('.');
|
||||
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) {
|
||||
$('#'+ini.id+'Tabel thead input[type=checkbox][id*=_cbhead_]').off('change');
|
||||
$('#'+ini.id+'Tabel tbody input[type=checkbox][id*=_cbox_]').off('change');
|
||||
$('#'+ini.id+'Tabel tbody').off('click');
|
||||
$.each(ini.option, function(key, val){
|
||||
if (val.type == 'checkbox'){
|
||||
$('#'+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]);
|
||||
$('#'+ini.id+'Tabel tbody input[type=checkbox][id*='+val.field+'_cbox_]').each(function(){
|
||||
this.checked = _chek;
|
||||
this.value = (this.checked ? val.avalue[0] : val.avalue[1]);
|
||||
});
|
||||
});
|
||||
});
|
||||
$('#'+ini.id+'Tabel tbody input[type=checkbox][id*=_cbox_]').each(function(){
|
||||
this.id = val.field + this.id;
|
||||
this.checked = this.value==val.avalue[0];
|
||||
$(this).on('change', function(){
|
||||
this.value = (this.checked ? val.avalue[0] : val.avalue[1]);
|
||||
});
|
||||
});
|
||||
} else if (val.type == 'button'){
|
||||
if (val.icon == 'fon-tabel-dt') {
|
||||
$('#'+ini.id+'Tabel tbody').on('click', '.fon-tabel-dt', function(){
|
||||
var tr = $(this).closest('tr');
|
||||
var row = otabel.row(tr);
|
||||
if (row.child.isShown()){
|
||||
row.child.hide();
|
||||
tr.removeClass('shown');
|
||||
}else{
|
||||
});
|
||||
$('#'+ini.id+'Tabel tbody input[type=checkbox][id*=_cbox_]').on('change', function(){
|
||||
this.value = (this.value == val.avalue[1] ? val.avalue[0] : val.avalue[1]);
|
||||
this.checked = this.value == val.avalue[0];
|
||||
});
|
||||
} else if (val.type == 'button'){
|
||||
if (val.icon == 'fon-tabel-dt') {
|
||||
$('#'+ini.id+'Tabel tbody').on('click', '.fon-tabel-dt', function(){
|
||||
var tr = $(this).closest('tr');
|
||||
var row = otabel.row(tr);
|
||||
if (row.child.isShown()){
|
||||
row.child.hide();
|
||||
tr.removeClass('shown');
|
||||
}else{
|
||||
var fnc = val.func.split('.');
|
||||
if (typeof window[fnc[0]][fnc[1]] === 'function'){
|
||||
var _dt_id = $('<div id="TD_Fonia_' + parseInt(Math.random() * 99999999) + '" />');
|
||||
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'){
|
||||
var _dt_id = $('<div id="TD_Fonia_' + parseInt(Math.random() * 99999999) + '" />');
|
||||
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 !');
|
||||
});
|
||||
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);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user