how to use editable-table

[mushi]

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

[Support2]

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.

---

[Author]

Posts