DataTables Request Unknown Parameter Error (Editor JS/CSS)

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.

Hi Jmyrtle

It looks as though there is a conflict using “name” as JS is using that to pass data to server.php and action it accordingly. I would recommend being more specific and using something like:-


 {
   "label": "Name:",
   "name": "full_name"
 },

You would also need to update your server.php file and your database to match.

But my server.php file has this attribute…

<?php

// DB table to use
$table = 'members';
 
// Table's primary key
$primaryKey = 'id';
 
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case simple
// indexes
$columns = array(
    //array( 'db' => 'id', 'dt' => 0 ),
    array( 'db' => 'name',  'dt' => 1 ),
    array( 'db' => 'residential_address', 'dt' => 2 ),
    array( 'db' => 'mailing_address', 'dt' => 3 ),
    array( 'db' => 'precinct', 'dt' => 4),
    array( 'db' => 'age', 'dt' => 5 ),
    array( 'db' => 'ethnicity',  'dt' => 6 ),
    array( 'db' => 'gender', 'dt' => 7 ),
    array( 'db' => 'party', 'dt' => 8 ),
    array( 'db' => 'race', 'dt' => 9 ),
    array( 'db' => 'phone', 'dt' => 10 )		
);
 
// SQL server connection information
$sql_details = array(
    'user' => 'root',
    'pass' => '',
    'db'   => 'ccrp_db',
    'host' => 'localhost'
);
 
require( 'ssp.class.php' );
 
echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
?>

My database actually begins with the ID column, but when I generated the data from DataTables, it said that I didn’t need a column that contained a primary key… See this screenshot:

image

That’s why the line is commented out.

This is what the site says, but it doesn’t explain how to fix the error.

image

UPDATE
After some help from the DataTables Team, I was able to get partially through the setup process, but Editor is not pulling any records from my database into DataTables. They mentioned that I needed to update the config.php file which contains the information needed to connect to the database. When I updated it, I see this:

Fatal error: Uncaught Error: Call to a member function transaction() on string in C:\xampp\htdocs\ccrp\api\lib\Editor.php:964 Stack trace: #0 C:\xampp\htdocs\ccrp\api\lib\Editor.php(700): DataTables\Editor->_process(Array) #1 C:\xampp\htdocs\ccrp\api\server_data.php(53): DataTables\Editor->process(Array) #2 {main} thrown in C:\xampp\htdocs\ccrp\api\lib\Editor.php on line 964

I am not sure what this error means or how to fix it. The DataTables team says it may have something to do with the config.php file I updated, so here is my current config file:

<?php if (!defined('DATATABLES')) exit(); // Ensure being used in DataTables env.

/*
 * DB connection script for Editor
 * Created by http://editor.datatables.net/generator
 */

// Enable error reporting for debugging (remove for production)
error_reporting(E_ALL);
ini_set('display_errors', '1');

/*
 * Edit the following with your database connection options
 */
$sql_details = array(
    "type" => "Mysql",
    "user" => "root",
    "pass" => "",
    "host" => "localhost",
    "port" => "",
    "db"   => "ccrp_db",
    "dsn"  => "charset=utf8"
);

?>