copy dari repo om Irfan
This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
|
||||
(function( $ ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var datatableInit = function() {
|
||||
|
||||
var $table = $('#datatable-ajax');
|
||||
$table.dataTable({
|
||||
bProcessing: true,
|
||||
sAjaxSource: $table.data('url')
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
$(function() {
|
||||
datatableInit();
|
||||
});
|
||||
|
||||
}).apply( this, [ jQuery ]);
|
||||
@@ -0,0 +1,17 @@
|
||||
|
||||
|
||||
(function( $ ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var datatableInit = function() {
|
||||
|
||||
$('#datatable-default').dataTable();
|
||||
|
||||
};
|
||||
|
||||
$(function() {
|
||||
datatableInit();
|
||||
});
|
||||
|
||||
}).apply( this, [ jQuery ]);
|
||||
@@ -0,0 +1,239 @@
|
||||
|
||||
|
||||
(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"><i class="fa fa-save"></i></a>',
|
||||
'<a href="#" class="hidden on-editing cancel-row"><i class="fa fa-times"></i></a>',
|
||||
'<a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i></a>',
|
||||
'<a href="#" class="on-default remove-row"><i class="fa fa-trash-o"></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
|
||||
},
|
||||
|
||||
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 ]);
|
||||
@@ -0,0 +1,77 @@
|
||||
|
||||
(function( $ ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var datatableInit = function() {
|
||||
var $table = $('#datatable-details');
|
||||
|
||||
// format function for row details
|
||||
var fnFormatDetails = function( datatable, tr ) {
|
||||
var data = datatable.fnGetData( tr );
|
||||
|
||||
return [
|
||||
'<table class="table mb-none">',
|
||||
'<tr class="b-top-none">',
|
||||
'<td><label class="mb-none">Rendering engine:</label></td>',
|
||||
'<td>' + data[1]+ ' ' + data[4] + '</td>',
|
||||
'</tr>',
|
||||
'<tr>',
|
||||
'<td><label class="mb-none">Link to source:</label></td>',
|
||||
'<td>Could provide a link here</td>',
|
||||
'</tr>',
|
||||
'<tr>',
|
||||
'<td><label class="mb-none">Extra info:</label></td>',
|
||||
'<td>And any further details here (images etc)</td>',
|
||||
'</tr>',
|
||||
'</div>'
|
||||
].join('');
|
||||
};
|
||||
|
||||
// insert the expand/collapse column
|
||||
var th = document.createElement( 'th' );
|
||||
var td = document.createElement( 'td' );
|
||||
td.innerHTML = '<i data-toggle class="fa fa-plus-square-o text-primary h5 m-none" style="cursor: pointer;"></i>';
|
||||
td.className = "text-center";
|
||||
|
||||
$table
|
||||
.find( 'thead tr' ).each(function() {
|
||||
this.insertBefore( th, this.childNodes[0] );
|
||||
});
|
||||
|
||||
$table
|
||||
.find( 'tbody tr' ).each(function() {
|
||||
this.insertBefore( td.cloneNode( true ), this.childNodes[0] );
|
||||
});
|
||||
|
||||
// initialize
|
||||
var datatable = $table.dataTable({
|
||||
aoColumnDefs: [{
|
||||
bSortable: false,
|
||||
aTargets: [ 0 ]
|
||||
}],
|
||||
aaSorting: [
|
||||
[1, 'asc']
|
||||
]
|
||||
});
|
||||
|
||||
// add a listener
|
||||
$table.on('click', 'i[data-toggle]', function() {
|
||||
var $this = $(this),
|
||||
tr = $(this).closest( 'tr' ).get(0);
|
||||
|
||||
if ( datatable.fnIsOpen(tr) ) {
|
||||
$this.removeClass( 'fa-minus-square-o' ).addClass( 'fa-plus-square-o' );
|
||||
datatable.fnClose( tr );
|
||||
} else {
|
||||
$this.removeClass( 'fa-plus-square-o' ).addClass( 'fa-minus-square-o' );
|
||||
datatable.fnOpen( tr, fnFormatDetails( datatable, tr), 'details' );
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$(function() {
|
||||
datatableInit();
|
||||
});
|
||||
|
||||
}).apply( this, [ jQuery ]);
|
||||
@@ -0,0 +1,42 @@
|
||||
|
||||
|
||||
(function( $ ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var datatableInit = function() {
|
||||
var $table = $('#datatable-tabletools');
|
||||
|
||||
$table.dataTable({
|
||||
sDom: "<'text-right mb-md'T>" + $.fn.dataTable.defaults.sDom,
|
||||
oTableTools: {
|
||||
sSwfPath: $table.data('swf-path'),
|
||||
aButtons: [
|
||||
{
|
||||
sExtends: 'pdf',
|
||||
sButtonText: 'PDF'
|
||||
},
|
||||
{
|
||||
sExtends: 'csv',
|
||||
sButtonText: 'CSV'
|
||||
},
|
||||
{
|
||||
sExtends: 'xls',
|
||||
sButtonText: 'Excel'
|
||||
},
|
||||
{
|
||||
sExtends: 'print',
|
||||
sButtonText: 'Print',
|
||||
sInfo: 'Please press CTR+P to print or ESC to quit'
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
$(function() {
|
||||
datatableInit();
|
||||
});
|
||||
|
||||
}).apply( this, [ jQuery ]);
|
||||
Reference in New Issue
Block a user