Editor edit/remove popup window not showing
Editor edit/remove popup window not showing
bd0504
Posts: 1Questions: 1Answers: 0
Hi, I am completely new to Datatables. I want to make an editable table, but right now I only want to keep to the front end, which means I'm not including any server-side code. But even so I thought the popup windows should still work...
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../DataTables-1.10.15/media/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../../DataTables-1.10.15/extensions/Buttons/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../../DataTables-1.10.15/extensions/Select/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../../DataTables-1.10.15/extensions/Editor/css/editor.dataTables.min.css">
<script type="text/javascript" src="../../jquery-3.2.1.js"></script>
<script type="text/javascript" src="../../DataTables-1.10.15/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../DataTables-1.10.15/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="../../DataTables-1.10.15/extensions/Buttons/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="../../DataTables-1.10.15/extensions/Select/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="../../DataTables-1.10.15/extensions/Editor/js/dataTables.editor.min.js"></script>
</head>
<body>
<div class="content">
<table id="test" class="table table-striped table-bordered table-hover dt-responsive" cellspacing="0" width="100%">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>g</th>
</tr>
</thead>
<tbody>
<tr>
<td>njnkn</td>
<td>njnkn</td>
<td>njnkn</td>
<td>njnkn</td>
<td>njnkn</td>
<td>njnkn</td>
<td>njnkn</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" class="init">
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
table: "#test",
fields: [
{
label: "a:",
name: "merchant_name"
}, {
label: "b:",
name: "merchant_number"
}, {
label: "c:",
name: "merchant_type"
},
{
label: "d:",
name: "account_type"
},
{
label: "e:",
name: "status"
},
{
label: "f:",
name: "registration_time",
type: "datetime"
},
{
label: "g:",
name: "memo"
}
]
} );
$('#test').dataTable( {
dom: "Bfrtip",
lengthChange: false,
select: true,
columns: [
{ data: "merchant_name" },
{ data: "merchant_number" },
{ data: "merchant_type" },
{ data: "account_type" },
{ data: "status" },
{ data: "registration_time" },
{ data: "memo" }
],
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
</script>
</body>
</html>
This discussion has been closed.
Answers
Hi,
I don't see anything obviously wrong there. Is there anything shown in your browser's console?
Allan