Need Help Getting Started with Editor

Need Help Getting Started with Editor

vince-carrascovince-carrasco Posts: 3Questions: 1Answers: 0
edited November 8 in Editor

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

  • vince-carrascovince-carrasco Posts: 3Questions: 1Answers: 0

    Editor seems to instantiate fine, I get buttons, and I get blank rows (one for each record), select works, But I get no data.

  • allanallan Posts: 48,322Questions: 1Answers: 6,976 Site admin

    Hi,

    Thanks for the details! The issue is that your data source contains arrays, but by using columns.data and fields.name as 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:

    {
        "data": [
            ["1", "SA-101", "Document/Revision Review/Approval Procedures", "A", "July"],
                    ...
    

    With the columns definition you are using, DataTables is actually expecting:

    {
        "data": [{
            "id": "1",
            "number": "SA-101",
            "subject": "Document/Revision Review/Approval Procedures",
            "revision": "A",
            "review_due_date": "July"
        },
            ...
    }
    

    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:

            columns: [
                { data: 0 },
                { data: 1 },
                { data: 2 },
                { data: 3 },
                { data: 4 }
            ],
    

    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.name property would need to be updated.

    Regards,
    Allan

  • vince-carrascovince-carrasco Posts: 3Questions: 1Answers: 0

    Working on object method.

    My JSON Object returns this:

    [{
        "id": 1,
        "Number": "SA-101",
        "Subject": "Document\/Revision Review\/Approval Procedures",
        "Revision": "A",
        "Review_Due_Date": "July"
    }]
    

    But by Object does not include this in the return:

    {
        "data": [{
    

    Not sure if I am on the right track.

  • kthorngrenkthorngren Posts: 4,031Questions: 19Answers: 885

    You can use ajax.dataSrc to fix this. The second example is what you want.

    Kevin

  • allanallan Posts: 48,322Questions: 1Answers: 6,976 Site admin

    Yes, as Kevin says, use ajax.dataSrc and set it to be an empty string to tell DataTables to expect a flat array for the rows.

    Allan

Sign In or Register to comment.