<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DataTable-AltEditor - Example #4</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.5/css/responsive.dataTables.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>DataTable-AltEditor - Example #4</h1>
This is the original example, not sure everything works yet.
<table class="table table-striped" id="testTableData">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<!--
- saveButton - onClick, takes all the data from the datatable and sends it to the server
- cancelButton - onClick, asks the user if the wants to undo unsaved changes and (if yes)
reloads the datatable with the data from the server.
- messages - Displays the response from the server.
-->
<div>
<button type='button' class='btn btn-default' id='saveButton' value='Save'>Save</button>
<button type='button' class='btn btn-default' id='cancelButton' value='Cancel' disabled='true'>Cancel</button>
<span id='messages'> </span>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.3.0.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.5/js/dataTables.responsive.js"></script>
<script src="../../src/dataTables.altEditor.free.js"></script>
<script>
$(document).ready(function () {
//////////////////////////////////////////
/*
IMPORTANT - COLUMNDEFS
Always add the DT_RowId row and always add it as the first column!
- Visibility state doesnt matter but searchable
state should be set to the same value.
Always add a type!
Current supported type parameters:
text - for editable textfields (including numbers, emails etc.)
select - for select menues, if used then options should be specified aswell
readonly - for fields with readonly attribute.
Other parameters:
MANDATORY:
id - Should be set to same value as data-parameter.
data - Identifier of value in data from AJAX call.
title - Title of column.
OPTIONAL:
pattern - For inputvalidation of the textfield. Specify a regex for the pattern to use.
errorMsg - Message that is shown when mismatch with pattern is found.
hoverMsg - Message that is shown on mouseover on text fields (hints).
unique - Data that can only exist once in the datatable. Shows an error on input if found.
special - Only working setting is "portRange". This is in relation to input validation.
If used then validation will check for a portrange in format (startPort:endPort)
and validate both with the supplied regex.
*/
//////////////////////////////////////////
//Example of column definitions.
var columnDefs = [{
id: "DT_RowId",
data: "DT_RowId",
type: "hidden"
}, {
title: "Select example",
id: "status",
data: "status",
type: "select",
"options": [
"on",
"off"
]
}, {
title: "Text example",
id: "ipAddress",
data: "ipAddress",
type: "text",
pattern: "^((?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){0,1}$",
errorMsg: "*Invalid address - Enter valid ip.",
hoverMsg: "(Optional) - Ex: 82.84.86.88",
unique: true
}, {
title: "Port example",
id: "port",
data: "port",
type: "text",
special: "portRange",
pattern: "^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$",
errorMsg: "*Invalid port - Enter valid port or range.",
hoverMsg: "Ex: 6112 (single) or 6111:6333 (range)",
unique: true
}, {
title: "Readonly example",
id: "read",
data: "read",
type: "readonly"
}]
var url_ws_mock_get = './example4.json';
if (location.href.startsWith("file://")) {
// local URL's are not allowed
url_ws_mock_get = 'https://luca-vercelli.github.io/DataTable-AltEditor/example/04_more/example4.json';
}
//Table creation
var myTable = $('#testTableData').dataTable({
dom: 'Bfrltip', //Element order: Button container(B) is essential.
ajax: url_ws_mock_get, //Receiving data from this source.
columns: columnDefs, //Columns defined above.
select: 'single', //Only single column selection is implemented.
altEditor: true, //Enable altEditor.
responsive: true, //Enable responsiveness.
buttons: [{ //All implemented buttons. Do not change name attribute.
text: 'Createddd',
name: 'add'
}, {
extend: 'selected',
text: 'Edit',
name: 'edit'
}, {
extend: 'selected',
text: 'Delete',
name: 'delete'
}, {
text: 'Refresh',
name: 'refresh'
}]
});
});
// If the user has unsaved changes when reloading/leaving the page, then
// an alert is displayed asking the user to confirm the action
$(window).bind('beforeunload', function () {
if (!$('#cancelButton').is(':disabled')) {
return "";
}
});
</script>
</body>
</html>
{
"sProcessing": "Đang xử lý...",
"sLengthMenu": "Xem _MENU_ mục",
"sZeroRecords": "Không tìm thấy dòng nào phù hợp",
"sInfo": "Đang xem _START_ đến _END_ trong tổng số _TOTAL_ mục",
"sInfoEmpty": "Đang xem 0 đến 0 trong tổng số 0 mục",
"sInfoFiltered": "(được lọc từ _MAX_ mục)",
"sInfoPostFix": "",
"sSearch": "Tìm:",
"sUrl": "",
"oPaginate": {
"sFirst": "Đầu",
"sPrevious": "Trước",
"sNext": "Tiếp",
"sLast": "Cuối"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DataTable-AltEditor - Example #10</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.5/css/responsive.dataTables.css" />
</head>
<body>
<div class="container">
<h1>DataTable-AltEditor - Example #10</h1>
<h2>Files and images</h2>
<p>For file download, your best option is to provide a direct link for each row and download it when required.</p>
<p>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.</p>
<table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="example">
</table>
</div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.3.0.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.5/js/dataTables.responsive.js"></script>
<script src="../../src/dataTables.altEditor.free.js"></script>
<script src="./example10.js"></script>
</body>
</html>
$(document).ready(function () {
var columnDefs = [{
data: "id",
title: "Id",
type: "readonly"
},
{
data: "name",
title: "Name"
},
{
data: "position",
title: "Position"
},
{
data: "imagelink",
title: "Avatar (direct link)",
render: function (data, type, row, meta) {
if (data) return `<img style='max-width:50px;max-height:50px' src='${data}'></img> or <button onclick='window.open("${data}")'>Download</button>`;
},
disabled: true
},
{
name: "image",
data: null,
render: function (data, type, row, meta) {
return "My file";
},
type: "file",
title: "Avatar (base64 upload)"
}];
var myTable;
// local URL's are not allowed
var url_ws_mock_get = './mock_svc_load.json';
var url_ws_mock_ok = './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/10_file_upload/mock_svc_load.json';
url_ws_mock_ok = 'https://luca-vercelli.github.io/DataTable-AltEditor/example/10_file_upload/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
});
}
});
});
