Editor | JSP & Java Servlet examples?

BenignReaver

Does anyone know where I can find a decent example of how to use Editor to act as a (CRUD) application?

To this point, I have my table rendered, and have included the basic editing structure, now I need to get this working so I can update individual cells/entire columns, create rows and delete rows. I cant find any examples where Java Servlets are used and I find this to be most disappointing, given the cross-platform capabilities of the framework.

My table is generated via GET request & serverside processing.

The ideal plan would be to update, edit & delete to their own servlets.

Here is the code I have thus far:

var table = "#personTable";
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).DataTable(
    {
        "bPaginate": true,
        "iDisplayLength": 50,
        "order": [],
        "bInfo": true,
        "iDisplayStart":0,
        "bProcessing" : true,
        serverSide : true,
        "sAjaxSource": path+"/com/studywithdemo/JqueryDatatablePluginDemo.java",
        "sDom": 'CRT<"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 }
            ]
        }
    });
    $("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();
    });
});

Any help on this matter would be greatly appreciated.

Michael

allan

I'm not aware of anyone having publicly pushed Java servlets for Editor I'm afraid.

Allan

BenignReaver

That's fairly surprising, given the overall popularity of Java for Web Development...

I don't suppose you have a solution to my issue to hand?
I really can't avoid servlets, so something that would allow me to communicate with the servlet and not cause a huge IO Overhead (writing json file is definitely out).

Any help would be greatly appreciated on this matter.

allan

As a one man band it is simply a question of time. Thus far I've focused on PHP and .NET. I hope to add additional platforms in future.

What is the specific issue you are having? The above asks for an example, which I'm afraid I don't have.

Allan

BenignReaver

@Allan,

You've done well on your todd pal, be proud!

If i could get some attributes & values for each row, I'd be able to develop the servlet round that and have it work.

allan

This is on submit of the form? The client / server communication protocol that Editor uses is documented in the manual and it details the parameter names and values that Editor will send for the server to process.

Regards,
Allan

BenignReaver

So what you're saying is, it may yet be possible to implement this API for my servlet needs?

If I manage to get it working, I'll re-factor the code and give you rights to it so as to implement the code into your project.

allan

Basically you can use the client-side library as documented on the Editor site. But if you want to use a Java based backend, you would need to write the code that accepts the incoming data from Editor and then returns the expected values.

Interested to hear how you get on with it.

Allan

BenignReaver

If it works the way I think it does, extending the functionality of HttpServlet will enable the incoming/outgoing communication based on session variables.

So something like:

String sAdded = request.getParameter("create");
if(!sAdded == null)
{
   //insert instructions & database communication
}

If that's the case, I can definitely develop a rudimentary framework for you to be able to officially support Java Servlets.

allan

Thank you. I'd certainly be interested to see what you create, but I am unlikely to officially support it as part of the Editor package at the moment due to lack of resources (time and knowledge of Java).

Allan

BenignReaver

Either way, I'll do what I can.

It'll have to be a weekend project however, as work takes the top of my priorities at the present time.

Michael

muyinza

Hello..
i followed the client/server communication guide and i implemented it on my servlet side but the editor plug in doesnt seem to be sending the parameters to the server side..but am using server side processing and it works fine

allan

@muyinza - Please link to the page so we can take a look and see what is going wrong.

Allan

BenignReaver

@muyinza,
I got my implementation working with editable, when I get some time during the week I'll compile a data pack and set it up for download, providing the links.

For now, did you get your issue sorted muyinza?

Apologies for the late reply, I've not stopped for about a week =/

almircampos

Hi, guys.

I'm developing web system in Java, and I'm using the Spring, Hibernate, and other frameworks. My goal is using the Datatables with the Editor as my standard framework for the table view on the client side.

At this point I'm working with only one table (from about 20) as a study case during the trial period of the Editor, and the basic CRUD is working fine.

Actually, I had some "hard times" trying to figure out how to make all those stuff work together.

My conclusion (for now) is that the key point is learning how the DataTables and the Editor work (I'm still learning). If you understand that, the server-side will be pretty straight forward.

Like you, I really would like to see an API or more official examples using Java on the server-side. For now, I think the best we can do is sharing some codes in the forums. I hope I can do it very soon.

Cheers.

karenjang

I got servlet server-side processing working but the buttons (New, Edit, and Delete) were not showing. The codes are as follows:
Any suggestions?

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function () {
    editor = new $.fn.dataTable.Editor( {
                bServerSide: true,
                table: "#payers",
                fields: [ {
                        label: "PUID:",
                        name: "id"
                    },
                    {
                        label: "Payer ID:",
                        name: "payerID"
                    }, {
                        label: "Payer Name:",
                        name: "payerName"
                    }, {
                        label: "Contract ID:",
                        name: "contractID"
                    }, {
                        label: "Ins Co:",
                        name: "insCo"
                    }, {
                        label: "Ins Type:",
                        name: "insType"
                    }, {
                        label: "Ins Group ID:",
                        name: "groupID"
                    }, {
                        label: "Effective:",
                        name: "eff",
                        type: "date"
                    }, {
                        label: "Termination:",
                        name: "term",
                        type: "date"
                    }
                ]
               
    } );

    $('#payers').DataTable( {
        type: 'POST',
        bServerSide: true,
        sAjaxSource: "/myPayers/DataTableServlet",
        bProcessing: true,
        spagingType: 'full_numbers',
        "bJQueryUI": true,

        aoColumns: [
                      { "sInt": "id",
                            "bSearchable": false,
                            "bSortable": false,
                            "bVisible": false  },
                      { "sName": "payerID" },
                      { "sName": "payerName" },
                      { "sName": "contractID" },
                      { "sName": "insCo" },
                      { "sName": "insType" },
                      { "sName": "groupID" },
                      { "sName": "eff" },
                      { "sName": "term" }
                     ],
       columnDefs: [ 
                     { "targets": "contractID",  
                       "defaultContent": "",
                     },
                     { "targets": "insCo",  
                         "defaultContent": "",
                       },
                     { "targets": "insType", 
                         "defaultContent": "",
                     },
                     { "targets": "groupID", 
                         "defaultContent": "",
                     }
                   ],                     
       "tableTools": {
           sRowSelect: "os",
           "aButtons": [
               { sExtends: "editor_create", editor: editor },
               { sExtends: "editor_edit",   editor: editor },
               { sExtends: "editor_remove", editor: editor }
           ]
       }
     } );  
    $("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()
    {
        "#payers".fnStandingRedraw();
    });
});

allan

Hi,

You would need to include the T option in dom to show the TableTools buttons. For example:

dom: "Tfrtip",

Allan