Need Help Getting Started with Editor
Need Help Getting Started with Editor
vince-carrasco
Posts: 21Questions: 7Answers: 0
I have an existing DataTable that works fine. I am now attempting to implement Editor but get error:
DataTables warning: table id=example - Requested unknown parameter 'id' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4.
I've included my page and code below.
Have not been able to figure this one out.
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DataTables Editor - tblGOP</title>
<link rel="stylesheet" type="text/css" href="../datatables/datatables.min.css">
<link rel="stylesheet" type="text/css" href="../datatables/generator-base.css">
<link rel="stylesheet" type="text/css" href="../datatables/Editor-1.8.0/css/editor.dataTables.min.css">
<script type="text/javascript" charset="utf-8" src="../datatables/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../datatables/Editor-1.8.0/js/dataTables.editor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/GOP.js"></script>
</head>
<body class="dataTables">
<div class="container">
<div class="row">
<div class="col-12">
<header class="text-center mb-4">
<h2 class="h2 g-color-black g-font-weight-600">GOP Reviews (QA)</h2>
</header>
<div class="table-responsive m-t-40">
<table id="example" class="display nowrap table table-hover table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Number</th>
<th>Subject</th>
<th>Revision</th>
<th>Review Due Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Number</th>
<th>Subject</th>
<th>Revision</th>
<th>Review Due Date</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
=============================================================================
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "../GOPA.asp",
table: "#example",
fields: [ {
label: "ID",
name: "id"
}, {
label: "Number",
name: "number"
}, {
label: "Subject:",
name: "subject"
}, {
label: "Revision:",
name: "revision"
}, {
label: "Review Due Date:",
name: "review_due_date"
}
]
} );
$('#example').DataTable( {
dom: "Bfrtip",
ajax: "../GOPA.asp",
columns: [
{ data: "id" },
{ data: "number" },
{ data: "subject" },
{ data: "revision" },
{ data: "review_due_date" }
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
=============================================================================
{"data" : [["1","SA-101","Document/Revision Review/Approval Procedures","A","July"],["2","SA-102","Quality Document Style Guide","A","July"],["3","SA-103","Corrosion Prevention and Control Program","C","November"],["4","SA-104","Tool Control Procedures","D","April"],["5","SA-105","Maintenance Control","C","December"],["6","SA-106","Individual Material Readiness list Program","C","December"],["7","SA-107","Gas Turbine Engine Test System and Certification","D","June"],["8","SA-108","Electrostatic Discharge (ESD)","C","December"],["9","SA-109","Central Technical Publication Library (CTPL)","D","January"],["10","SA-110","Naval Aviation Maintenance Discrepancy Reporting Program","C","January"],["11","SA-111","Logs and Records/Technical Directive Compliance","C","January"],["12","SA-112","Foreign Object Damage Prevention Program","C","February"],["13","SA-113","Quality Assurance Audit","F","June"],["14","SA-114","Maintenance Safety Program","B","February"],["15","SA-115","Battery Maintenance Safety","C","February"],["16","SA-116","Weight Handling Program","D","March"],["17","SA-117","Ordnance Qualification Certification Program","C","March"],["18","SA-118","Maintenance Training Program","F","May"],["19","SA-119","GSE, GSE SEPMS, SE Training & Licensing, SE Misuse and Abuse","C","March"],["20","SA-121","Hazardous Material Control and Management","C","April"],["21","SA-122","Metrology and Calibration","C","June"],["22","SA-123","Fuel System Maintenance Procedures","D","April"],["23","SA-124","Safe for Flight","B","May"],["24","SA-125","Fuel Surveillance","E","May"],["25","SA-126","Tire and Wheel Maintenance Safety Procedures","C","April"],["26","SA-127","Quality Assurance Procedures","D","July"],["27","SA-128","Engine Turn-up and Licensing Program","C","July"]]}
=============================================================================
Answers
Editor seems to instantiate fine, I get buttons, and I get blank rows (one for each record), select works, But I get no data.
Hi,
Thanks for the details! The issue is that your data source contains arrays, but by using
columns.dataandfields.nameas a string you are telling DataTables and Editor to expect an object for each row.This is better seen with formatted JSON - your data is:
With the
columnsdefinition you are using, DataTables is actually expecting:How to resolve - two options:
1) Change to using objects rather than arrays (I'd actually recommend this as it is easier to keep track of things rather than needing to remember what index belongs to which data point!)
2) Keep using arrays, but change your initialisation of DataTables to:
This is actually the default, so you don't actually need that at all, but its more illustrative to show it!
Likewise if you take that approach the Editor
field.nameproperty would need to be updated.Regards,
Allan
Working on object method.
My JSON Object returns this:
But by Object does not include this in the return:
Not sure if I am on the right track.
You can use
ajax.dataSrcto fix this. The second example is what you want.Kevin
Yes, as Kevin says, use
ajax.dataSrcand set it to be an empty string to tell DataTables to expect a flat array for the rows.Allan