DataTables Request Unknown Parameter Error (Editor JS/CSS)

#1

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.

#2

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.

#3

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.

#4

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

image

#5

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"
);

?>