# \[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;
});
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://javascriptuse.gitbook.io/javascript/advanced/datatable-jquery-datatables-editor-alternative-to-the-official-one-ok.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.