# \[DATATABLE] JQuery Datatables Editor - Alternative to the official one (ok)
1. [In memory arrays](https://belongstomany.com/example/01_in_memory_arrays/example1.html)
2.
```
```
C:\xampp\htdocs\belongstomany\example\01\_in\_memory\_arrays\example1.html
```html
DataTable-AltEditor - Example #1
DataTable-AltEditor - Example #1
with array-based datatable rows
Rows are contained in some .js file in the form: [1,"Tiger Nixon", "System Architect", "Edinburgh", "5421",
"2011/04/25", "$320,800"]
Data is managed in memory. A "Refresh" button is meaningless here.
Rows are contained in some .js file in the form:
{id:1, name:"Tiger Nixon", position:"System Architect", office:"Edinburgh", extension:"5421",
startDate:"2011/04/25",
salary:"Tiger Nixon"}
Data is managed in memory. A "Refresh" button is meaningless here.
Rows are retrieved from some AJAX webservice, in the form:
{id:1, name:"Tiger Nixon", position:"System Architect", office:"Edinburgh", extension:"5421",
startDate:"2011/04/25",
salary:"Tiger Nixon"}
INSERT and UPDATE will fail because there is no real server set up here.
with object-based datatable rows loaded via Ajax. Two different datatables.
Rows are retrieved from some AJAX webservice, in the form:
{id:1, name:"Tiger Nixon", position:"System Architect", office:"Edinburgh", extension:"5421",
startDate:"2011/04/25",
salary:"Tiger Nixon"}
INSERT and UPDATE will fail because there is no real server set up here.
```
C:\xampp\htdocs\belongstomany\example\05\_two\_datatables\example5.js
```javascript
$(document).ready(function () {
var columnDefs = [
{
data: "id",
title: "Id",
type: "readonly"
},
{
data: "name",
title: "Name"
},
{
data: "position",
title: "Position"
},
{
data: "office",
title: "Office"
},
{
data: "extension",
title: "Extn."
},
{
data: "startDate",
title: "Start date"
},
{
data: "salary",
title: "Salary"
}
];
var myTable;
var url_ws_mock_get = '../03_ajax_objects/mock_svc_load.json';
var url_ws_mock_ok = '../03_ajax_objects/mock_svc_ok.json';
if (location.href.startsWith("file://")) {
// local URL's are not allowed
url_ws_mock_get = 'https://luca-vercelli.github.io/DataTable-AltEditor/example/03_ajax_objects/mock_svc_load.json';
url_ws_mock_ok = 'https://luca-vercelli.github.io/DataTable-AltEditor/example/03_ajax_objects/mock_svc_ok.json';
}
myTable = $('#example').DataTable({
"sPaginationType": "full_numbers",
ajax: {
url: url_ws_mock_get,
// our data is an array of objects, in the root node instead of /data node, so we need 'dataSrc' parameter
dataSrc: ''
},
columns: columnDefs,
dom: 'Bfrtip', // Needs button container
select: 'single',
responsive: true,
altEditor: true, // Enable altEditor
buttons: [
{
text: 'Add',
name: 'add' // do not change name
},
{
extend: 'selected', // Bind to Selected row
text: 'Edit',
name: 'edit' // do not change name
},
{
extend: 'selected', // Bind to Selected row
text: 'Delete',
name: 'delete' // do not change name
},
{
text: 'Refresh',
name: 'refresh' // do not change name
}
],
onAddRow: function (datatable, rowdata, success, error) {
$.ajax({
// a tipycal url would be / with type='PUT'
url: url_ws_mock_ok,
type: 'GET',
data: rowdata,
success: success,
error: error
});
},
onDeleteRow: function (datatable, rowdata, success, error) {
$.ajax({
// a tipycal url would be /{id} with type='DELETE'
url: url_ws_mock_ok,
type: 'GET',
data: rowdata,
success: success,
error: error
});
},
onEditRow: function (datatable, rowdata, success, error) {
$.ajax({
// a tipycal url would be /{id} with type='POST'
url: url_ws_mock_ok,
type: 'GET',
data: rowdata,
success: success,
error: error
});
}
});
// ======================================================================================
var columnDefs2 = [{
data: "id",
title: "Id",
type: "readonly"
},
{
data: "name",
title: "Name"
},
{
data: "office",
title: "Office"
},
{
data: "startDate",
title: "Start date"
},
{
data: "position",
title: "Position"
}];
var myOtherTable = $('#example2').DataTable({
"sPaginationType": "full_numbers",
ajax: {
url: url_ws_mock_get,
// our data is an array of objects, in the root node instead of /data node, so we need 'dataSrc' parameter
dataSrc: ''
},
columns: columnDefs2,
dom: 'Bfrtip', // Needs button container
select: 'single',
responsive: true,
altEditor: true, // Enable altEditor
buttons: [
{
text: 'Add',
name: 'add' // do not change name
},
{
extend: 'selected', // Bind to Selected row
text: 'Edit',
name: 'edit' // do not change name
},
{
extend: 'selected', // Bind to Selected row
text: 'Delete',
name: 'delete' // do not change name
},
{
text: 'Refresh',
name: 'refresh' // do not change name
}
],
onAddRow: function (datatable, rowdata, success, error) {
$.ajax({
// a tipycal url would be / with type='PUT'
url: url_ws_mock_ok,
type: 'GET',
data: rowdata,
success: success,
error: error
});
},
onDeleteRow: function (datatable, rowdata, success, error) {
$.ajax({
// a tipycal url would be /{id} with type='DELETE'
url: url_ws_mock_ok,
type: 'GET',
data: rowdata,
success: success,
error: error
});
},
onEditRow: function (datatable, rowdata, success, error) {
$.ajax({
// a tipycal url would be /{id} with type='POST'
url: url_ws_mock_ok,
type: 'GET',
data: rowdata,
success: success,
error: error
});
}
});
});
```
1. [\
Select2 and Datetimepicker](https://belongstomany.com/example/06_select_datepicker/example6.html)
C:\xampp\htdocs\belongstomany\example\06\_select\_datepicker\example6.html
```html
DataTable-AltEditor - Example #6
DataTable-AltEditor - Example #6
Select2 and Datepicker
In this example there is a "single" select2, a "multiple" select2, a date picker, a date/time picker, and a
"single" select2 with nested objects
For file download, your best option is to provide a direct link for each row and download it when required.
For file upload, a naive implementation is provided, the whole file is encoded in base 64 and uploaded
togheter with the row. Not intended for huge files.
';
$(selector + ' .modal-body').append(message);
},
/**
* Default callback for insertion: mock webservice, always success.
*/
onAddRow: function (dt, rowdata, success, error) {
console.log("Missing AJAX configuration for INSERT");
success(rowdata);
},
/**
* Default callback for editing: mock webservice, always success.
*/
onEditRow: function (dt, rowdata, success, error) {
console.log("Missing AJAX configuration for UPDATE");
success(rowdata);
},
/**
* Default callback for deletion: mock webservice, always success.
*/
onDeleteRow: function (dt, rowdata, success, error) {
console.log("Missing AJAX configuration for DELETE");
rowdata.every(function (rowIdx, tableLoop, rowLoop) {
success(rowdata[rowIdx])
})
},
/**
* Open a dialog using available framework
*/
internalOpenDialog(selector, onopen) {
var $sel = $(selector);
if ($sel.modal) {
// Bootstrap
$sel.on('show.bs.modal', onopen);
$sel.modal('show');
}
else if ($sel.foundation) {
// Foundation
$sel.on('open.zf.reveal', onopen);
$sel.on('closed.zf.reveal', function () { $('.reveal-overlay').hide(); });
var popup = new Foundation.Reveal($sel);
popup.open();
}
else {
console.error('You must load Bootstrap or Foundation in order to open modal dialogs');
return;
}
},
/**
* Close a dialog using available framework
*/
internalCloseDialog(selector) {
var $sel = $(selector);
if ($sel.modal) {
// Bootstrap
$sel.modal('hide');
} else if ($sel.foundation) {
// Foundation
var popup = new Foundation.Reveal($sel);
popup.close();
$('.reveal-overlay').hide();
} else {
console.error('You must load Bootstrap or Foundation in order to open modal dialogs');
return;
}
},
/**
* Dinamically reload options in SELECT menu
*/
reloadOptions: function ($select, options) {
var oldValue = $select.val();
$select.empty(); // remove old options
if (options.length > 0) {
// array-style select or select2
$.each(options, function (key, value) {
$select.append($("")
.attr("value", value).text(value));
});
}
else {
// object-style select or select2
$.each(options, function (key, value) {
$select.append($("")
.attr("value", value).text(key));
});
}
$select.val(oldValue); // if still present, of course
$select.trigger('change');
},
/**
* Convert file to Base 64 form
* @see https://stackoverflow.com/questions/36280818
*/
getBase64: function (file, onSuccess, onError) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
if (onSuccess) onSuccess(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
if (onError) onError(error);
};
},
/**
* Sanitizes input for use in HTML
* @param s
* @param preserveCR
* @returns {string}
* @private
*/
_quoteattr: function (s, preserveCR) {
if (s == null) {
return "";
}
preserveCR = preserveCR ? '
' : '\n';
if (Array.isArray(s)) {
// for MULTIPLE SELECT
var newArray = [];
var x;
for (x in s) newArray.push(s[x]);
return newArray;
}
return ('' + s) /* Forces the conversion to string. */
.replace(/&/g, '&') /* This MUST be the 1st replacement. */
.replace(/'/g, ''') /* The 4 other predefined entities, required. */
.replace(/"/g, '"')
.replace(//g, '>')
.replace(/\r\n/g, preserveCR) /* Must be before the next replacement. */
.replace(/[\r\n]/g, preserveCR);
},
});
/**
* altEditor version
*
* @static
* @type String
*/
altEditor.version = '2.0';
/**
* altEditor defaults
*
* @namespace
*/
altEditor.defaults = {
/**
* @type {Boolean} Ask user what they want to do, even for a single
* option
*/
alwaysAsk: false,
/** @type {string|null} What will trigger a focus */
focus: null, // focus, click, hover
/** @type {column-selector} Columns to provide auto fill for */
columns: '', // all
/** @type {boolean|null} Update the cells after a drag */
update: null, // false is editor given, true otherwise
/** @type {DataTable.Editor} Editor instance for automatic submission */
editor: null
};
/**
* Classes used by altEditor that are configurable
*
* @namespace
*/
altEditor.classes = {
/** @type {String} Class used by the selection button */
btn: 'btn'
};
// Attach a listener to the document which listens for DataTables
// initialisation
// events so we can automatically initialise
$(document).on('preInit.dt.altEditor', function (e, settings, json) {
if (e.namespace !== 'dt') {
return;
}
var init = settings.oInit.altEditor;
var defaults = DataTable.defaults.altEditor;
if (init || defaults) {
var opts = $.extend({}, init, defaults);
if (init !== false) {
var editor = new altEditor(settings, opts);
// e is a jQuery event object
// e.target is the underlying jQuery object, e.g. $('#mytable')
// so that you can retrieve the altEditor object later
e.target.altEditor = editor;
}
}
});
// Alias for access
DataTable.altEditor = altEditor;
return altEditor;
});
```
