I am building a CRUD application with aid from the DataTables API. I am trying to code add, edit and delete functionality manually, but the guys at DataTables said that it would be better to use Editor. So, I downloaded a trial version for JS and CSS for 15 days.
I only have 8 days left to use it and am having issues setting it up. My server data is not being pulled in from DataTables because I am receiving this error:
DataTables warning: table id=dataTable - Requested unknown parameter 'name' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
I am not sure what this means, so I clicked on the link that appeared, but it doesn’t make much sense as I have tried to make sure that I have the right columns inside the table. I am not sure what else could be causing the problem. I also ran the debugger, but I couldn’t upload it to them since my webpage timed out from uploading the configuration.
Here is my javascript code and my html table code:
/*
* Editor client script for DB table members
* Created by http://editor.datatables.net/generator
*/
(function($){
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: 'api/server.php',
table: '#dataTable',
fields: [
{
"label": "Name:",
"name": "name"
},
{
"label": "Residential Address:",
"name": "residential_address"
},
{
"label": "Mailing Address:",
"name": "mailing_address"
},
{
"label": "Precinct:",
"name": "precinct"
},
{
"label": "Age:",
"name": "age"
},
{
"label": "Ethnicity:",
"name": "ethnicity"
},
{
"label": "Gender:",
"name": "gender"
},
{
"label": "Party:",
"name": "party",
"def": "REP"
},
{
"label": "Race:",
"name": "race"
},
{
"label": "Phone:",
"name": "phone"
}
]
} );
var table = $('#dataTable').DataTable( {
dom: 'Bfrtip',
processing: true,
serverSide: true,
order: [],
pageLength: 25,
ajax: 'api/server.php',
columns: [
{
"data": "name"
},
{
"data": "residential_address"
},
{
"data": "mailing_address"
},
{
"data": "precinct"
},
{
"data": "age"
},
{
"data": "ethnicity"
},
{
"data": "gender"
},
{
"data": "party"
},
{
"data": "race"
},
{
"data": "phone"
}
],
select: true,
lengthChange: false,
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor }
]
} );
} );
}(jQuery));
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Residential Address</th>
<th>Mailing Address</th>
<th>Precinct</th>
<th>Age</th>
<th>Ethnicity</th>
<th>Gender</th>
<th>Party</th>
<th>Race</th>
<th>Phone Number</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Residential Address</th>
<th>Mailing Address</th>
<th>Precinct</th>
<th>Age</th>
<th>Ethnicity</th>
<th>Gender</th>
<th>Party</th>
<th>Race</th>
<th>Phone Number</th>
</tr>
</tfoot>
</table>
Let me know if any other code is needed. If I have it on hand, I’ll be glad to share it.