I'm trying to get the editor to work on a simple example table but keep getting the following error when trying to add a new item. Debugger doesn't give me any errors. It says this:
datatables.min.js:200 Uncaught TypeError: $(...)[J72] is not a function
at Editor.(anonymous function).(anonymous function) [as _message] (<redacted link>/data-tables/datatables.min.js:200:117254)
at Editor.(anonymous function).(anonymous function) [as error] (<redacted link>/data-tables/datatables.min.js:200:75725)
at Editor.(anonymous function).(anonymous function) [as submit] (<redacted link>/data-tables/datatables.min.js:200:85459)
at Editor.action (datatables.min.js:200)
at HTMLButtonElement.<anonymous> (datatables.min.js:200)
at HTMLButtonElement.dispatch (jquery-3.3.1.slim.min.js:2)
at HTMLButtonElement.v.handle (jquery-3.3.1.slim.min.js:2)
Debugger info:
#example
Data source: Javascript
Processing mode: Client-side
Draws: 1
Columns: 2
Rows - total: 0
Rows - after search: 0
Display start: 0
Display length: 10
15 tests complete. 2 problems were found:
Table ID Problem description
#example Your table is not inside a `container` or `container-fluid` element. This can cause the table to be misaligned due to the use of negative margins on the column layout used by DataTables for Bootstrap. Typically you should include a container element near the top level of your HTML.
- Using FixedHeader without setting a `meta` tag to "user-scalable=no" will mean that FixedHeader does not work on Android devices as `position:fixed` is disabled in the browser under those conditions. Either add a suitable meta tag, or be aware that FixedHeader will not operate for Android users.
Here is my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- <link rel="icon" href="../../../../favicon.ico"> -->
<title>Case Tracker</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="styles/data-tables.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.17/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/select/1.2.6/css/select.dataTables.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="styles/sticky-footer.css" rel="stylesheet">
<link href="styles/materia.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script type="text/javascript" src="data-tables/datatables.min.js"></script>
<script type="text/javascript" src="data-tables/Buttons-1.5.2/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" src="data-tables/Editor-2018-08-17-1.7.4/js/editor.bootstrap4.min.js"></script>
<script type="text/javascript" src="data-tables/Select-1.2.6/js/select.bootstrap4.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/tracker.js"></script>
<script src="js/tooltip.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="data-tables/datatables.min.css"/>
</head>
<body>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Case Tracker</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<!-- Begin page content -->
<main role="main" class="container">
<h1 class="mt-5">Case tracker.</h1>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Item</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Item</th>
<th>Status</th>
</tr>
</tfoot>
</table>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
And this is the table JS (tracker.js):
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
// Object that will contain the local state
var todo = {};
// Create or update the todo localStorage entry
if ( localStorage.getItem('todo') ) {
todo = JSON.parse( localStorage.getItem('todo') );
}
// Set up the editor
editor = new $.fn.dataTable.Editor( {
table: "#example",
fields: [
{
label: "Item:",
name: "item"
}, {
label: "Status:",
name: "status",
type: "radio",
def: "To do",
options: [ 'To do', 'Done' ]
}
],
ajax: function ( method, url, d, successCallback, errorCallback ) {
var output = { data: [] };
if ( d.action === 'create' ) {
// Create new row(s), using the current time and loop index as
// the row id
var dateKey = +new Date();
$.each( d.data, function (key, value) {
var id = dateKey+''+key;
value.DT_RowId = id;
todo[ id ] = value;
output.data.push( value );
} );
}
else if ( d.action === 'edit' ) {
// Update each edited item with the data submitted
$.each( d.data, function (id, value) {
value.DT_RowId = id;
$.extend( todo[ id ], value );
output.data.push( todo[ id ] );
} );
}
else if ( d.action === 'remove' ) {
// Remove items from the object
$.each( d.data, function (id) {
delete todo[ id ];
} );
}
// Store the latest `todo` object for next reload
localStorage.setItem( 'todo', JSON.stringify(todo) );
// Show Editor what has changed
successCallback( output );
}
} );
// Initialise the DataTable
$('#example').DataTable( {
dom: "Brtip",
data: $.map( todo, function (value, key) {
return value;
} ),
columns: [
{ data: "item" },
{ data: "status" }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
All the other files are unedited downloaded from datatables.net.
