/ var / www / html / cai / admins / javascripts / tables / [ HOME SHELL ]

Name	Size	Permission
examples.datatables.ajax.js	285 B	-rwxr-x--x
examples.datatables.default.js	201 B	-rwxr-x--x
examples.datatables.editable.j...	5.38 KB	-rwxr-x--x
examples.datatables.row.with.d...	2 KB	-rwxr-x--x
examples.datatables.tabletools...	724 B	-rwxr-x--x

Code Editor : examples.datatables.editable.js

(function( $ ) {

'use strict';

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;
		},

build: function() {
			this.datatable = this.$table.DataTable({
				aoColumns: [
					null,
					null,
					null,
					{ "bSortable": false }
				]
			});

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="hidden on-editing save-row"></a>',
				'<a href="#" class="hidden on-editing cancel-row"></a>',
				'<a href="#" class="on-default edit-row"></a>',
				'<a href="#" class="on-default remove-row"></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
		},

rowCancel: function( $row ) {
			var _self = this,
				$actions,
				i,
				data;

if ( $row.hasClass('adding') ) {
				this.rowRemove( $row );
			} else {

data = this.datatable.row( $row.get(0) ).data();
				this.datatable.row( $row.get(0) ).data( data );

$actions = $row.find('td.actions');
				if ( $actions.get(0) ) {
					this.rowSetActionsDefault( $row );
				}

this.datatable.draw();
			}
		},

rowEdit: function( $row ) {
			var _self = this,
				data;

data = this.datatable.row( $row.get(0) ).data();

$row.children( 'td' ).each(function( i ) {
				var $this = $( this );

if ( $this.hasClass('actions') ) {
					_self.rowSetActionsEditing( $row );
				} else {
					$this.html( '<input type="text" class="form-control input-block" value="' + data[i] + '"/>' );
				}
			});
		},

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 );
			}

this.datatable.draw();
		},

rowRemove: function( $row ) {
			if ( $row.hasClass('adding') ) {
				this.$addButton.removeAttr( 'disabled' );
			}

this.datatable.row( $row.get(0) ).remove().draw();
		},

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 ]);

Urban Research Lab

The Urban Research Lab (URL) at IIIT-Delhi was established in 2020, during a time when the pandemic brought the complexities of urban life more visible than ever. What started as an initiative by faculty and students has grown into a collaborative space for critically exploring and reimagining the urban questions through research, dialogue, and interdisciplinary engagement.

${this.title}

Code Editor : examples.datatables.editable.js

Urban Research Lab