Editor: How do I fix my function?

BenignReaver

I'm trying to implement the free trial for Editor within a project.

The project is based on Servlets (apache tomcat) and I'm having some difficulty in getting it working...

var table;
var editor;
jQuery(document).ready(function()
{
    editor = new $.fn.dataTable.Editor(
            {
                "sAjaxSource" : path+"/com/studywithdemo/JqueryDatatablePluginDemo.java",
                table: "#personTable",
                fields: 
                    [
                     {
                         label: "CLI",
                         name: "cli"
                     },
                     {
                         label: "Dom. Acc Number",
                         name: "domAccNumb"
                     },
                     {
                         label: "Int. Acc Numb",
                         name: "intAccNumb"
                     },
                     {
                         label: "OPT-in Status",
                         name: "optInSts"
                     },
                     {
                         label: "Email Address",
                         name: "mailAddress"
                     }
                    ],
                    formOptions:
                    {
                        bubble:
                        {
                            title: 'Edit',
                            buttons: false
                        }
                    }
            });
            
            $('#personTable').on('click', 'tbody td', function(e)
            {
                if($(this).index() > 0)
                {
                    editor.bubble(this);
                }
            });
            
            $('#personTable').DataTable(
            {
                columns:
                    [
                        { data: "cli" },
                        { data: "domAccNumb" },
                        { data: "intAccNumb" },
                        { data: "optInSts" },
                        { data: "mailAddress"}
                    ],
                    order: [1, 'asc'],
                    tableTools:
                    {
                        sRowSelect: "os",
                        sRowSelector: 'td:first-child',
                        aButtons:
                        [
                          { sExtends: "editor_create", editor: editor },
                          { sExtends: "editor_edit",   editor: editor },
                          { sExtends: "editor_remove", editor: editor }
                        ]
                    }
            });
            
    table = $('#personTable').dataTable(
    {
        "bPaginate": true,
        "iDisplayLength": 100,
        "order": [ 0, 'asc' ],
        "bInfo": true,
        "iDisplayStart":0,
        "bProcessing" : true,
        "bServerSide" : true,
        "sAjaxSource" : path+"/com/studywithdemo/JqueryDatatablePluginDemo.java",
        "dom": 'C<"clear">lfrtip'
    });
    $("div.toolbar").append('<div class="btn-group" style="padding:5px "><button class="btn btn-default" id="refreshbtn" style="background:none;border:1px solid #ccc;height:30px" type="button"><span class="glyphicon glyphicon-refresh" style="padding:3px"></span></button></div>');
    $("div.toolbar").css("float","right");
    $('#refreshbtn').click(function()
    {
        table.fnStandingRedraw();
    });
});

I keep getting a message saying "Cannot reinitialise DataTable". I've followed the support URL but i'm just getting myself confused.

If someone could help out that'd be great,
Michael

PS: I'm working off this example: https://editor.datatables.net/examples/bubble-editing/defaultOptions.html

allan

You are attempting to initialise the DataTable twice:

• Line 50 - $('#personTable').DataTable(
• Line74 - table = $('#personTable').dataTable(

Only do it once.

Combine the two configuration objects if you need them both.

Allan

BenignReaver

@allan,

Silly question but how would I combine them both?
I'm new to Ajax and have little experience with DataTables, even less with Editor.

Michael

BenignReaver

I altered my code to the following;

var table;
var editor;
jQuery(document).ready(function()
{
    table = $('#personTable').dataTable(
    {
        "bPaginate": true,
        "iDisplayLength": 100,
        "order": [ 0, 'asc' ],
        "bInfo": true,
        "iDisplayStart":0,
        "bProcessing" : true,
        "bServerSide" : true,
        "sAjaxSource": path+"/com/studywithdemo/JqueryDatatablePluginDemo.java",
        "dom": 'C<"clear">lfrtip'
    });
    $("div.toolbar").append('<div class="btn-group" style="padding:5px "><button class="btn btn-default" id="refreshbtn" style="background:none;border:1px solid #ccc;height:30px" type="button"><span class="glyphicon glyphicon-refresh" style="padding:3px"></span></button></div>');
    $("div.toolbar").css("float","right");
    $('#refreshbtn').click(function()
    {
        table.fnStandingRedraw();
    });
});
$(document).ready(function()
{
    editor = new $.fn.dataTable.Editor(
            {
                "sAjaxSource": path+"/com/studywithdemo/JqueryDatatablePluginDemo.java",
                table: "#personTable",
                fields: 
                    [
                     {
                         label: "CLI",
                         name: "cli"
                     },
                     {
                         label: "Dom. Acc Number",
                         name: "domAccNumb"
                     },
                     {
                         label: "Int. Acc Numb",
                         name: "intAccNumb"
                     },
                     {
                         label: "OPT-in Status",
                         name: "optInSts"
                     },
                     {
                         label: "Email Address",
                         name: "mailAddress"
                     }
                    ],
                    formOptions:
                    {
                        bubble:
                        {
                            title: 'Edit',
                            buttons: false
                        }
                    },
                dom: "Tfrtip",
                "sAjaxSource": path+"/com/studywithdemo/JqueryDatatablePluginDemo.java",
                columns:
                    [
                        { data: "cli" },
                        { data: "domAccNumb" },
                        { data: "intAccNumb" },
                        { data: "optInSts" },
                        { data: "mailAddress"}
                    ],
                    order: [1, 'asc'],
                    tableTools:
                    {
                        sRowSelect: "os",
                        sRowSelector: 'td:first-child',
                        aButtons:
                        [
                          { sExtends: "editor_create", editor: editor },
                          { sExtends: "editor_edit",   editor: editor },
                          { sExtends: "editor_remove", editor: editor }
                        ]
                    }
            });
    $('#personTable').on('click', 'tbody td', function(e)
            {
                if($(this).index() > 0)
                {
                    editor.bubble(this);
                }
            });
});

I get the results rendered, but there isn't any options to edit the table contents. How can I fix this? I've loaded the js & css files. Opera's debugging says:

"Uncaught Unable to automatically determine field from source. Please specify the field nameJ3B.l3r.N3r.m.(anonymous function).individual @ dataTables.editor.js:378J3B.l3r.N3r.e._dataSource @ dataTables.editor.js:304(anonymous function) @ dataTables.editor.js:165m.extend.map @ jquery-1.11.1.min.js:2J3B.l3r.N3r.e.bubble @ dataTables.editor.js:165(anonymous function) @ custom-datatable.js:88m.event.dispatch @ jquery-1.11.1.min.js:3m.event.add.r.handle @ jquery-1.11.1.min.js:3"

allan

This tech note details that error and how to resolve it. The best method is to use the editField option for the columns.

Actually, a better option is to use columns.data to populate DataTables using objects and update your server-side script to return objects rather than arrays, so that both DataTables and Editor expect the same data structure.

Allan

BenignReaver

Ok, I've altered the code to run off objects rather than strings and the table now loads as before. The issue now is that tableTools isn't kicking off.

The buttons are not present and I cannot select any rows, any tips?

Here's the current js file:

var table;
var editor;

jQuery(document).ready(function()
{
    editor = new $.fn.dataTable.Editor(
    {
        "sAjaxSource": path+"/com/studywithdemo/JqueryDatatablePluginDemo.java",
        "table": "#personTable",
        "fields":
        [
         {
             "label" : "CLI:",
             "name" : "cli"
         },
         {
             "label" : "Dom. Acc Number:",
             "name" : "domAccIn"
         },
         {
             "label" : "Int Acc Number:",
             "name" : "intAccIn"
         },
         {
             "label" : "Opt In",
             "name" : "optInSts"
         },
         {
             "label" : "Email Address",
             "name" : "emailIn"
         }
        ]
    });
    
    table = $('#personTable').DataTable(
    {
        "bPaginate": true,
        "iDisplayLength": 50,
        "order": [],
        "bInfo": true,
        "iDisplayStart":0,
        "bProcessing" : true,
        serverSide : true,
        "sAjaxSource": path+"/com/studywithdemo/JqueryDatatablePluginDemo.java",
        type: "POST",
        "dom": 'C<"clear">lfrtip',
        columns:
        [
            { data: "cli" },
            { data: "domAccIn" },
            { data: "intAccIn" },
            { data: "optInSts"},
            { data: "emailIn" }                  
        ],
        tableTools:
        {
            sRowSelect: "os",
            aButtons:
            [
                { sExtends: "editor_create", editor: editor },
                { sExtends: "editor_edit", editor: editor },
                { sExtends: "editor_remove", editor: editor }
            ]
        }
    });
});

allan

You need to add the T option to your dom parameter.

Allan

BenignReaver

stupid question: where? =/

BenignReaver

@allan

You my friend, are a life saver!

Now to figure out the post method from updating, adding and deleting with java :3