Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- controler ///
- function get_table_data() {
- $all = $this->model->get_table_data($_GET,0);
- $val = $this->model->get_table_data($_GET,1);
- $total = count($all);
- $hitung = count($val);
- $m=array();
- $n=array();
- $h=array();
- $cell=array();
- if($hitung>=1) {
- foreach($val as $row => $key) {$m[]=$key;}
- foreach($m[0] as $r => $k) { $n[]=$r; }
- foreach($n as $r => $k) { $h[]=$k; }
- $i=0;
- foreach($val as $row) {
- for($z=0;$z<=count($h)-1;$z++) {
- $x=$h[$z];
- $cell[$z]=$row->$x;
- }
- $data[] = $cell;
- $i++;
- }
- } else { $data = array(); }
- $out = array(
- 'draw' => $_GET['draw'],
- 'data' => $data,
- 'recordsTotal'=>$hitung,
- 'recordsFiltered'=>$total,
- );
- echo json_encode($out);
- }
- // MODEL //
- function get_table_data($data,$limit) {
- if($data['search']['value']!='') {
- $v = $data['search']['value'];
- if($data['table']=='MST_LDS') :
- $this->db->where("( `date` LIKE '%$v%' ESCAPE '!' OR `name` LIKE '%$v%' ESCAPE '!' OR `phone` LIKE '%$v%' ESCAPE '!' OR `email` LIKE '%$v%' ESCAPE '!' OR `alamat` LIKE '%$v%' ESCAPE '!' OR `leeds` LIKE '%$v%' ESCAPE '!' OR `marketing` LIKE '%$v%' ESCAPE '!' OR `prepared` LIKE '%$v%' ESCAPE '!' )");
- endif;
- }
- if ($limit==1) {
- if($data['length']!=-1) :
- $this->db->limit($data['length'],$data['start']);
- endif;
- }
- if(isset($data['order'])) {
- $col = $data['order'][0]['column'];
- if($col==100) :
- $this->db->order_by('id','desc');
- else :
- $this->db->order_by($data['columns'][$col]['name'],$data['order'][0]['dir']);
- endif;
- }
- if(isset($data['where'])){
- return $this->db->get_where(constant($data['table']),$data['where'])->result();
- } else {
- return $this->db->get(constant($data['table']))->result();
- }
- }
- // JS //
- (function( $ ) {
- 'use strict';
- var get_actions = function( d,actions ) {
- actions = [
- '<a href="#" class="hidden on-editing save-row"><i class="fa fa-save" id="'+d[0]+'"></i></a>',
- '<a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times" id="'+d[0]+'"></i></a>',
- '<a href="#" class="on-default edit-row"><i class="fa fa-pencil" id="'+d[0]+'"></i></a>',
- '<a href="#" class="on-default remove-row"><i class="fa fa-trash-o" id="'+d[0]+'"></i></a>',
- ].join(' ');
- return actions
- };
- var EditableTable = {
- options: {
- addButton: '#addToTable',
- table: '#datatable-editable',
- dialog: {
- wrapper: '#dialog',
- cancelButton: '#dialogCancel',
- confirmButton: '#dialogConfirm',
- }
- },
- initialize: function() {
- this
- .setVars()
- .build()
- .events();
- },
- setVars: function() {
- this.$table = $( this.options.table );
- this.$addButton = $( this.options.addButton );
- // dialog
- this.dialog = {};
- this.dialog.$wrapper = $( this.options.dialog.wrapper );
- this.dialog.$cancel = $( this.options.dialog.cancelButton );
- this.dialog.$confirm = $( this.options.dialog.confirmButton );
- return this;
- },
- get_level: function( d ) {
- if (d[10]==0) {return ''}
- var name=level[d[10]];
- if (name==undefined) {return '';}
- else {return name;}
- },
- get_region: function( d ) {
- if (d[4]==0) {return ''}
- var name=region[d[4]];
- if (name==undefined) {return '';}
- else {return name;}
- },
- build: function() {
- var _self = this;
- this.datatable = this.$table.DataTable({
- orderMulti: false,
- bServerSide:true,
- processing:true,
- bAutoWidth:false,
- order:[],
- ajax: {
- url : 'get_table_data',
- type : 'GET',
- data : {
- table:'MST_USR',
- field:'id,email,password,fullname,region_id,level',
- },
- },
- aoColumns: [
- {title:"Username / Email", name:"email", data: 1},
- {title:"Password", name:"password", data: 2},
- {title:"Fullname", name:"fullname", data: 3},
- {title:"Level / Previlage", name:"level", data: _self.get_level},
- {title:"Action", name:"actions", data: get_actions, sortable: false, searchable: false, sClass:"text-center"},
- ],
- });
- window.dt = this.datatable;
- return this;
- },
- events: function() {
- var _self = this;
- this.$table
- .on('click', 'a.save-row', function( e ) {
- e.preventDefault();
- _self.rowSave( $(this).closest( 'tr' ) );
- })
- .on('click', 'a.cancel-row', function( e ) {
- e.preventDefault();
- _self.rowCancel( $(this).closest( 'tr' ) );
- })
- .on('click', 'a.edit-row', function( e ) {
- e.preventDefault();
- _self.rowEdit( $(this).closest( 'tr' ) );
- })
- .on( 'click', 'a.remove-row', function( e ) {
- e.preventDefault();
- var $row = $(this).closest( 'tr' );
- $.magnificPopup.open({
- items: {
- src: '#dialog',
- type: 'inline'
- },
- preloader: false,
- modal: true,
- callbacks: {
- change: function() {
- _self.dialog.$confirm.on( 'click', function( e ) {
- e.preventDefault();
- _self.rowRemove( $row );
- $.magnificPopup.close();
- });
- },
- close: function() {
- _self.dialog.$confirm.off( 'click' );
- }
- }
- });
- });
- this.$addButton.on( 'click', function(e) {
- e.preventDefault();
- _self.rowAdd();
- });
- this.dialog.$cancel.on( 'click', function( e ) {
- e.preventDefault();
- $.magnificPopup.close();
- });
- return this;
- },
- // ==========================================================================================
- // ROW FUNCTIONS
- // ==========================================================================================
- rowAdd: function() {
- this.$addButton.attr({ 'disabled': 'disabled' });
- var actions,
- data,
- $row,
- actions = [
- '<a href="#" class="on-editing save-row"><i class="fa fa-save"></i></a>',
- '<a href="#" class="on-editing cancel-row"><i class="fa fa-times"></i></a>',
- ].join(' ');
- data = [
- '<tr role="row" class="adding odd">'+
- '<td><input type="text" class="form-control input-block" /></td>'+
- '<td><input type="text" class="form-control input-block" /></td>'+
- '<td><input type="text" class="form-control input-block" /></td>'+
- '<td><select id="level" data-plugin-selectTwo class="form-control populate"></select></td>'+
- '<td class="actions text-center">' + actions + '</td>'+
- '</tr>',
- ].join(' ');
- $("table").append(data);
- $('#oper').val('add');
- var obj = {};
- $(".populate").each(function() {
- var id = $(this).attr('id');
- if(id=='region_id') { var obj = region; }
- if(id=='level') { var obj = level; }
- $('select#'+id)
- .append($('<option></option>')
- .attr('value','').text(''))
- .themePluginSelect2({ "minimumResultsForSearch" : -1 });
- $('select#'+id+' option').filter(function (a,b) {
- return this.value == '';
- }).attr('selected',true);
- $.each(obj, function(key, value) {
- $('select#'+id).append($('<option></option>').attr('value',key).text(value))
- })
- })
- },
- rowCancel: function( $row ) {
- var _self = this,
- $actions,
- i,
- data;
- if ( $row.hasClass('adding') ) {
- this.rowRemove( $row );
- } else {
- $actions = $row.find('td.actions');
- if ( $actions.get(0) ) {
- this.rowSetActionsDefault( $row );
- $($actions[0]).removeClass( 'actions' );
- }
- data = this.datatable.row( $row.get(0) ).data();
- var actions = [
- '<a href="#" class="hidden on-editing save-row"><i class="fa fa-save" id="'+data[0]+'"></i></a>',
- '<a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times" id="'+data[0]+'"></i></a>',
- '<a href="#" class="on-default edit-row"><i class="fa fa-pencil" id="'+data[0]+'"></i></a>',
- '<a href="#" class="on-default remove-row"><i class="fa fa-trash-o" id="'+data[0]+'"></i></a>',
- ].join(' ');
- var cell = [
- '<td>' + data[1] + '</td>',
- '<td>' + data[2] + '</td>',
- '<td>' + data[3] + '</td>',
- '<td>' + _self.get_level(data) + '</td>',
- '<td class="text-center">' + actions + '</td>',
- ].join( ' ' );
- $row.html(cell)
- }
- },
- rowEdit: function( $row ) {
- var _self = this,
- data;
- $('#oper').val('edit')
- data = this.datatable.row( $row.get(0) ).data();
- $row.children( 'td' ).each(function( i ) {
- var $this = $( this );
- $row.find( 'td:last' ).addClass( 'actions' );
- if ( $this.hasClass('actions') ) {
- _self.rowSetActionsEditing( $row );
- } else {
- var actions = [
- '<a href="#" class="hidden on-editing save-row"><i class="fa fa-save" id="'+data[0]+'"></i></a>',
- '<a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times" id="'+data[0]+'"></i></a>',
- '<a href="#" class="on-default edit-row"><i class="fa fa-pencil" id="'+data[0]+'"></i></a>',
- '<a href="#" class="on-default remove-row"><i class="fa fa-trash-o" id="'+data[0]+'"></i></a>',
- ].join(' ');
- $row.html( ''+
- '<td><input type="text" class="form-control input-block" value="' + data[1] + '" /></td>'+
- '<td><input type="text" class="form-control input-block" value="' + data[2] + '" /></td>'+
- '<td><input type="text" class="form-control input-block" value="' + data[3] + '" /></td>'+
- '<td><select id="level" data-plugin-selectTwo class="form-control populate"></select></td>'+
- '<td class="actions text-center">' + actions + '</td>'
- );
- }
- });
- var obj = {}, vl, tx;
- $(".populate").each(function() {
- var id = $(this).attr('id');
- if(id=='region_id') { obj = region; vl = data[4]; tx = _self.get_region(data); }
- if(id=='level') { obj = level; vl = data[5]; tx = _self.get_level(data) }
- $.each(obj, function(key, value) {
- $('select#'+id)
- .append($('<option></option>')
- .attr('value',key).text(value))
- })
- $('select#' + id + ' option').filter(function (a,b) {
- return this.text == tx;
- }).attr('selected',true);
- })
- $('#region_id, #level').themePluginSelect2({ "minimumResultsForSearch" : -1 });
- },
- rowSave: function( $row ) {
- var _self = this,
- $actions,
- values = [];
- if ( $row.hasClass( 'adding' ) ) {
- this.$addButton.removeAttr( 'disabled' );
- $row.removeClass( 'adding' );
- }
- values = $row.find('td').map(function() {
- var $this = $(this);
- if ( $this.hasClass('actions') ) {
- _self.rowSetActionsDefault( $row );
- return _self.datatable.cell( this ).data();
- } else {
- return $.trim( $this.find('input').val() );
- }
- });
- var datable = this.datatable;
- //this.datatable.row( $row.get(0) ).data( values );
- $actions = $row.find('td.actions');
- if ( $actions.get(0) ) {
- this.rowSetActionsDefault( $row );
- }
- var id = $row.find('td.actions > a > i').attr('id');
- var val = {};
- val.email = values[0];
- val.username = values[0];
- val.password = values[1];
- val.fullname = values[2];
- val.level = $('select#level').val();
- val.id = id;
- val.oper = $('#oper').val();
- val.table = 'MST_USR';
- //console.log(val);
- $.post('manage_data',val,
- function(d,s,e) {
- if (d.status==1) {
- //show_messages('Data Updates')
- datable.draw();
- } else {
- //show_messages('Data Not Updates')
- datable.draw();
- }
- },'json')
- },
- rowRemove: function( $row ) {
- var tbl = this.datatable;
- if ( $row.hasClass('adding') ) {
- this.$addButton.removeAttr( 'disabled' );
- $row.remove()
- } else {
- var id = $row.find('i.fa-trash-o').attr('id')
- var val = {};
- val.id = id;
- val.oper = 'del';
- val.table = 'MST_USR';
- $.post('manage_data',val,
- function(d,s,e) {
- if (d.status==1) {
- show_messages('Data Deleted')
- tbl.row( $row.get(0) ).remove().draw();
- } else {
- show_messages('Data Not Deleted')
- tbl.row( $row.get(0) ).remove().draw();
- }
- },'json')
- }
- },
- rowSetActionsEditing: function( $row ) {
- $row.find( '.on-editing' ).removeClass( 'hidden' );
- $row.find( '.on-default' ).addClass( 'hidden' );
- },
- rowSetActionsDefault: function( $row ) {
- $row.find( '.on-editing' ).addClass( 'hidden' );
- $row.find( '.on-default' ).removeClass( 'hidden' );
- }
- };
- $(function() {
- EditableTable.initialize();
- });
- }).apply( this, [ jQuery ]);
- // HTML //
- <section class="panel">
- <div class="panel-body">
- <div class="row">
- <div class="col-sm-6">
- <div class="mb-md">
- <button id="addToTable" class="btn btn-primary">Tambah User <i class="fa fa-plus"></i></button>
- </div>
- </div>
- </div>
- <table class="table table-bordered table-striped mb-none" id="datatable-editable"></table>
- </div>
- </section>
- <div id="dialog" class="modal-block mfp-hide">
- <section class="panel">
- <header class="panel-heading">
- <h2 class="panel-title">Konfirmasi</h2>
- </header>
- <div class="panel-body">
- <div class="modal-wrapper">
- <div class="modal-text">
- <p>Apakah anda yakin akan menghapus data ini?</p>
- </div>
- </div>
- </div>
- <footer class="panel-footer">
- <div class="row">
- <div class="col-md-12 text-right">
- <button id="dialogConfirm" class="btn btn-primary">Yakin</button>
- <button id="dialogCancel" class="btn btn-default">Batal</button>
- </div>
- </div>
- </footer>
- </section>
- </div>
- <input type="hidden" id="oper" />
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement