How can I use dataTables and Editor with calling data from a db to the table

jbaldy28

I have a database of lots of info that build the table. What I want to be able to do is load the data through the ajax call and then be able to edit the data in the table. But I can't get the data to show up on the page. I'm using the DataTables in another interface and the loading, sorting, and other cool features work. I haven't used Editor before and I'm a little confused.

    function drawDataTable(){
        var len = allocationData.length;
            html = "<div id='dataTableDiv'><table id='dataTable' class='table table-bordered table-striped dataTable' role='grid'><thead><tr role='row'><th>System Name</th><th>Gatherer</th><th>Operator</th><th>County</th><th>Sample Date</th><th>Daily Avg</th></tr></thead><tbody>";
        for (i=0;i<len;i++){

            html += "<tr><td>" + allocationData['SystemName'][i] + "</td><td>" + allocationData['Gatherer'][i] + "</td><td>" + allocationData['Operator'][i] + "</td><td>" + allocationData['County'][i] + "</td><td>" + allocationData['SampleDate'][i] + "</td><td>" + allocationData['DailyAvg'][i] + "</td></tr>";

        }
        html += "</tbody></table></div>";

        $(".table-responsive").html(html);
    }

      $(function(){
        editor = new $.fn.dataTable.Editor( {
            "ajax": "qry/dataTable.php",
            "table": "#dataTable",
            "fields":[{
                "name": "SystemName"
            },{
                "name": "Gatherer"
            },{
                "name": "Operator"
            },{
                "name": "County"
            },{
                "name": "SampleDate"
            },{
                "name": "DailyAvg"
            }]
        });

        $('#dataTable').DataTable({
            dom: "Bfrtip",
            ajax: {
                type: "POST",
                url: "qry/dataTable.php",
                success: function(){
                    drawDataTable();
                }
            },
            serverSide: true,
           columns: [
                {data: "SystemName"},
                {data: "Gatherer"},
                {data: "Operator"},
                {data: "County"},
                {data: "SampleDate"},
                {data: "DailyAvg"}
            ],
            select: true,
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
            ]
        });
    });

kthorngren

Are you able to load the table without the Editor config?

Are you seeing errors in the browsers console log?

Kevin

jbaldy28

Yes it loads just fine when I don't use the Editor and just use the DataTables function to load the table.

No errors in the console when trying to run the Editor.

allan

What does the server return when you try to load the data from the Editor scripts? The network tools in your browser will let you see that.

The other thing to check is the server's error log to see if anything is being shown there.

Allan