Home Forums Porto Admin Template how to use editable-table

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10030773
    mushi
    Participant

    I am using editable table i want to display 5 fields in table and when user click on edit/delete button is should post that all row values to other php page via ajax so i can update that row values in my database.
    my fields are
    username , password , address , phone number , email

    when user click on update button username it shouldn’t be allow to update its username (that field (username) will not editable).

    and password should be display as ******. it should only be visible when user click on some button to show password of that specific row.
    it could be eye button/icon with password text box td

    i home you understand what i want to achieve how can i do that? will you please explain in detail? i am using editable table in my other pages too.



    Template Version: 2.2.0
    #10030781
    Support2
    Keymaster

    Hello,

    First note that when add new column to the table editable we need change the JS code in “js/examples/examples.datatables.editable.js”. For example a code with 5 columsn:

    HTML:

    <table class="table table-bordered table-striped mb-0" id="datatable-editable">
    	<thead>
    		<tr>
    			<th>Rendering engine</th>
    			<th>Browser</th>
    			<th>Platform(s)</th>
    			<th>Extra Heading</th>
    			<th>Actions</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr data-item-id="1">
    			<td>Trident</td>
    			<td>Internet
    				Explorer 4.0
    			</td>
    			<td>Win 95+</td>
    			<td>Extra Column</td>
    			<td class="actions">
    				<a href="#" class="hidden on-editing save-row"><i class="fas fa-save"></i></a>
    				<a href="#" class="hidden on-editing cancel-row"><i class="fas fa-times"></i></a>
    				<a href="#" class="on-default edit-row"><i class="fas fa-pencil-alt"></i></a>
    				<a href="#" class="on-default remove-row"><i class="far fa-trash-alt"></i></a>
    			</td>
    		</tr>
    		<tr data-item-id="2">
    			<td>Trident</td>
    			<td>Internet
    				Explorer 5.0
    			</td>
    			<td>Win 95+</td>
    			<td>Extra Column</td>
    			<td class="actions">
    				<a href="#" class="hidden on-editing save-row"><i class="fas fa-save"></i></a>
    				<a href="#" class="hidden on-editing cancel-row"><i class="fas fa-times"></i></a>
    				<a href="#" class="on-default edit-row"><i class="fas fa-pencil-alt"></i></a>
    				<a href="#" class="on-default remove-row"><i class="far fa-trash-alt"></i></a>
    			</td>
    		</tr>
    	</tbody>
    </table>

    Change the build() on the JS:

    build: function() {
    	this.datatable = this.$table.DataTable({
    		dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
    		aoColumns: [
    			null,
    			null,
    			null,
    			null,
    			{ "bSortable": false }
    		]
    	});
    
    	window.dt = this.datatable;
    
    	return this;
    },

    Change the rowAdd():

    rowAdd: function() {
    	this.$addButton.attr({ 'disabled': 'disabled' });
    
    	var actions,
    		data,
    		$row;
    
    	actions = [
    		'<a href="#" class="hidden on-editing save-row"><i class="fas fa-save"></i></a>',
    		'<a href="#" class="hidden on-editing cancel-row"><i class="fas fa-times"></i></a>',
    		'<a href="#" class="on-default edit-row"><i class="fas fa-pencil-alt"></i></a>',
    		'<a href="#" class="on-default remove-row"><i class="far fa-trash-alt"></i></a>'
    	].join(' ');
    
    	data = this.datatable.row.add([ '', '', '', '', actions ]);
    	$row = this.datatable.row( data[0] ).nodes().to$();
    
    	$row
    		.addClass( 'adding' )
    		.find( 'td:last' )
    		.addClass( 'actions' );
    
    	this.rowEdit( $row );
    
    	this.datatable.order([0,'asc']).draw(); // always show fields
    },

    Regarding update the table data with ajax, unfortunately Porto Admin not comes with a ready code to do exactly like you need. But we can share with some tips:

    To make the ajax request use the rowSave() on the JS file, for example:

    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() );
    		}
    	});
    
    	this.datatable.row( $row.get(0) ).data( values );
    
    	$actions = $row.find('td.actions');
    	if ( $actions.get(0) ) {
    		this.rowSetActionsDefault( $row );
    	}
    
    	$.ajax({
    		url: '/path/to/file.php',
    		type: 'post',
    		data: {
    			table_values: values // this can be accessed on the PHP file with $_POST['table_values']. Will return an array with the values
    		},
    	})
    	.done(function() {
    		console.log("success");
    	});
    
    	this.datatable.draw();
    },

    * The variable values is where the table data is stored. You need send those variable to the PHP file.
    * To not update the “username”, just ignore the “username” data on the PHP file.

    Porto don’t comes with a password hide/show. But we can easily do it with custom JS. First you need this HTML:

    <div class="d-flex">
    	<input type="password" class="form-control" value="xxxxxx" name="pw" /> 
    	<a href="#" class="btn btn-primary custom-show-hide-pw ml-2"><i class="fas fa-eye"></i></a>
    </div>

    And this code in (js/custom.js):

    $(document).on('click', '.custom-show-hide-pw', function(e){
    	e.preventDefault();
    
    	var input = $(this).prev();
    
    	if( input.attr('type') == 'password' ) {
    		input.attr('type', 'text');
    	} else {
    		input.attr('type', 'password');
    	}
    });

    We hope this helps.

    Kind Regards,

    Rodrigo.


Viewing 2 posts - 1 through 2 (of 2 total)