DataTable-Editor edit ncaught TypeError: extender is not a function
DataTable-Editor edit ncaught TypeError: extender is not a function
JoinLi
Posts: 3Questions: 1Answers: 0
I think this problem may occur when the server returns data, but I checked the example of the Datatable and found that the service return data is also a JSON, I don't understand, am I wrong?
HTML：
<html>
<head>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="Editor-1.8.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="Editor-1.8.1/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="Editor-1.8.1/css/keyTable.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="Editor-1.8.1/css/editor.dataTables.css">
<style class="init">
div.DTE_Inline input {
border: none;
background-color: transparent;
padding: 0 !important;
font-size: 90%;
}
div.DTE_Inline input:focus {
outline: none;
background-color: transparent;
}
</style>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="media/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="Editor-1.8.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="Editor-1.8.1/js/dataTables.select.min.js"></script>
<script type="text/javascript" charset="utf8" src="Editor-1.8.1/js/dataTables.keyTable.min.js"></script>
<script type="text/javascript" charset="utf8" src="Editor-1.8.1/js/dataTables.editor.js"></script>
<script class="init">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: {
create: "/api/user/create",
edit: "data/jsonDataEditor.cfm",
remove: "/api/user/_id_/delete"
},//
table: "#example",//
fields: [ {
label: "First name:",//
name: "first_name" //
}, {
label: "Last name:",
name: "last_name"
}, {
label: "Position:",
name: "position"
}, {
label: "Office:",
name: "office"
}, {
label: "Extension:",
name: "extn"
}, {
label: "Start date:",
name: "start_date",
type: "datetime"
}, {
label: "Salary:",
name: "salary"
}
]
} );
var table = $('#example').DataTable( {
dom: "Bfrtip",
ajax: "data/jsonData.json", //a
columns: [
{
data: null, //
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: "first_name" },
{ data: "last_name" },
{ data: "position" },
{ data: "office" },
{ data: "start_date" },
{ data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
],
keys: {
columns: ':not(:first-child)',
editor: editor
},
select: { //
style: 'os',
selector: 'td:first-child', //
blurable: true //
},
buttons: [
{ extend: "create", editor: editor },//
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th width="18%">Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</body>
</html>
data/jsonDataEditor.cfm:
<cfsetting showdebugoutput="No">
<cfset demo='{"data":[{"DT_RowId":"row_1","first_name":"Tiger","last_name":"Test2","position":"System Architect","email":"t.nixon@datatables.net","office":"Edinburgh","extn":"5421","age":"61","salary":"320800","start_date":"2011-04-25"}]}'>
<cfif IsJson(demo)>
<cfoutput>#demo#</cfoutput>
</cfif>
data/jsonData.json
{"data":[{"DT_RowId":"row_1","first_name":"Tiger","last_name":"Test","position":"System Architect","email":"t.nixon@datatables.net","office":"Edinburgh","extn":"5421","age":"61","salary":"320800","start_date":"2011-04-25"}]}
This question has an accepted answers - jump to answer
Answers
Hi @JoinLi ,
This thread should help, it's asking the same thing.
Cheers,
Colin
@colin Thank you very much