Client and Server-Side implementation with Servlets

Chimaira

Hello,
i need help to implement the Editor to a existing environment where DataTables running with several Servlets.

This is the existing code for run DataTables:
main.js

var table = $('<table cellpadding="0" cellspacing="0" border="0" class="stripe" id="sql-request-data-table"></table>');

var tableHeader = [];

$.each(queryDataResponse.ResultSet[0], function(key, value) {
    tableHeader.push({"data": key});
});

table = table.DataTable({
    "data": queryDataResponse.ResultSet,
    "columns": tableHeader,
    "searching": false, 
    "paging": false
});

$.each(tableHeader, function(index, value) {
    $(table.column(index).header()).html(value.data);
});

My question is how to implement the Editor in this existing code?

Further what Type of Date comes out of the Editor wenn editing/deleting/create an row.
I should now this for handling in the servlet.

Sry for my bad english... and
Thanks for help.

allan

The client-sever communication protocol that Editor uses is documented in the manual.

Allan

Chimaira

Ok ...
And how can i implement the Editor in this code?

var editor = new $.fn.dataTable.Editor( {
    ajax:  '/EditorServlet',
    table: 'atable'
    
} );

var atable = $('<table cellpadding="0" cellspacing="0" border="0" class="stripe" id="sql-request-data-table"></table>');
 
atable = atable.DataTable({
    "data": queryDataResponse.ResultSet,
    "columns": tableHeader,
    "searching": false,
    "paging": false,
    "dom":  'Tfrtip',
    "tableTools": {
        sRowSelect: 'os',
        aButtons: [
            { sExtends: 'editor_create', editor: editor },
            { sExtends: 'editor_edit',   editor: editor },
            { sExtends: 'editor_remove', editor: editor }
        ]
    }
});

allan

Your /EditorServlet servlet would need to implement the client / server protocol that I linked to above.

If you have any questions about that protocol, please let me know.

Allan

Chimaira

I'm sorry for the stupid questions. :-( I need this for my "bachelor work".

But the implementation of the Editor in den above code is right?

For better understanding: I need an Editor an an DataTabels instance for a working Editor?

For what i need the

fields: [
        { label: 'First name', name: 'first_name' },
        { label: 'Last name',  name: 'last_name'  },
        // etc
    ]

in the EditorInstance and the

columns: [
        { data: 'first_name' },
        { data: 'last_name' },
        // etc
    ],

in DataTablesInstance?

i don't have any idea for the EditorServlet because now i know the Parms but i don't know to use right.
To access the Parms i must use request.getParameter("action"/"data"/"id"); ?

Many thanks for your help!

allan

Yes, your code looks fine if you add the fields and columns as you mention. What exactly you should add depends upon what data you get in queryDataResponse.ResultSet. What does that data look like?

To access the Parms i must use request.getParameter("action"/"data"/"id"); ?

Honestly? Absolutely no idea :-). I know next to nothing about Java. If you need help with Java programming I would suggest asking on StackOverflow or a Java specific site.

Regards,
Allan

Chimaira

When the Editor and DataTables Code looks like good then should the Java Part not be a problem.

As ResultSet comes a JSONArray with the rows of a mysql select query.
This is a particular excerpt of the JavaServlet for the existing DataTables plugin

PrintWriter out = response.getWriter();
jsonResponse.put("ResultSet", jArray);
out.println(gson.toJson(jsonResponse);

Chimaira

I wont try the jsp Code but it don't work! :-(

Firefox -> Konsole - ReferenceError.. line 4

var editor = new $.fn.dataTable.Editor( {
                            "ajax":  "/EditorServlet",
                            "table": table   
                } );

Whats wrong with this code?

allan

Normally table should be a string - like in all of the examples.

But without a link to the page, I can't say for certain.

Regarding the Java, as I say, I don't know Java. Can you show me what the JSON output that this provides is please.

Allan

Chimaira

var editor = new $.fn.dataTable.Editor({
                            ajax : "/EditorServlet",
                            table : "#sql-request-data-table",
                            fields : [ {
                                label : "Sensor ID:",
                                name : "Sensor ID"
                            }, {
                                label : "Bezeichnung:",
                                name : "Bezeichnung"
                            }, {
                                label : "sensorvalue:",
                                name : "sensorvalue"
                            }, {
                                label : "address:",
                                name : "address"
                            }, {
                                label : "timestamp:",
                                name : "timestamp"
                            }, {
                                label : "age:",
                                name : "age"
                            } ]
                        });

This code where placed in the main.js and produce an Error but i don't know what is wrong.
// TypeError: $.fn.dataTable.Editor is not a constructor
Can you tell me what's wrong?

And in the index.html i implement:

<script src="js/vendor/jquery.dataTables.js"></script>
<script src="//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script src="//editor.datatables.net/media/js/dataTables.editor.min.js"></script>

allan

Change the code load order:

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<script src="//editor.datatables.net/media/js/dataTables.editor.min.js"></script>

jQuery first, then just one DataTables, followed by TableTools and then Editor.

Allan

Chimaira

I have saved the changes but it have no effects.
The window shows nothing and the console log "TypeError: $.fn.dataTable is undefined"
Do you have any idea?

Chimaira

Separately in what form/type sends the Editor the data object to Server?
Can you show me an example?

allan

Separately in what form/type sends the Editor the data object to Server?

I linked to the documentation for how the data is sent to the server above - Editor manual.

The window shows nothing and the console log "TypeError: $.fn.dataTable is undefined" Do you have any idea?

Can you give me a link to the page please? Also check that you aren't loading jQuery multiple times.

Allan

Chimaira

<!--         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.1.min.js"><\/script>')</script>
        <script src="js/vendor/jquery-ui-1.10.3.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/helper.js"></script>
        <script src="js/main.js"></script>

        <!-- <link rel="stylesheet" href="css/vendor/perfect-scrollbar-0.4.3.min.css"> -->
        <link rel="stylesheet" href="css/vendor/jquery.gridster.min.css">
        <!-- <link rel="stylesheet" href="css/vendor/jquery.tinyscrollbar.css"> -->
        <link rel="stylesheet" href="css/vendor/jquery.mCustomScrollbar.css">
        

        <script src="js/vendor/utils.js"></script>
        <script src="js/vendor/moment.min.js"></script>
        <script src="js/vendor/jquery.collision.js"></script>
        <script src="js/vendor/jquery.draggable.js"></script>
        <script src="js/vendor/jquery.coords.js"></script>
        <script src="js/vendor/jquery.gridster.js"></script>
        <script src="js/vendor/hammer.js"></script>
        <script src="js/vendor/svg-pan-zoom.js"></script>
        

<!-- DESTRIBUTION ENVIRONMENT -->
<!--        <script src="js/vendor/jquery.gridster.min.js"></script>    -->
        <script src="js/vendor/jquery.mCustomScrollbar.concat.min.js"></script>
        <script src="js/vendor/jquery.ui.touch-punch.min.js"></script>
        <script src="js/vendor/d3.min.js"></script>
        
        <script src="/js/vendor/jquery-1.11.1.min.js"></script>
        <script src="/js/vendor/jquery.dataTables.min.js"></script>
        <script src="/js/vendor/dataTables.tableTools.min.js"></script>
        <script src="/js/vendor/dataTables.editor.js"></script>
        
<!--        <script src="js/vendor/dataTables.editor.js"></script> -->
        <script src="js/vendor/hammer.min.js"></script>


    </body>
</html>

Thats all who loaded by the index.html

allan

I've just replied to your PM. Looks like there are 404 errors which is causing the issue.

Allan

Chimaira

Server to Client Data
Create:

action           = create
data[extn]       = 2947
data[first_name] = Fiona
data[last_name]  = Green
data[office]     = San Francisco
data[position]   = Chief Operating Officer (COO)
data[salary]     = 850000
data[start_date] = 2010-03-11

{
    "row": {
        "DT_RowId":   "row_29",
        "first_name": "Fiona",
        "last_name":  "Green",
        "position":   "Chief Operating Officer (COO)",
        "office":     "San Francisco",
        "extn":       "2947",
        "salary":     "850000",
        "start_date": "2010-03-11"
    }
}

Is it important that the ID Param Value exactly "row_1" or "row_12" is or should this param mirroring the real mysql ID value "1" "12"?

Why does the ID not in the HttpResponse Parameters?

allan

Is it important that the ID Param Value exactly "row_1" or "row_12" is or should this param mirroring the real mysql ID value "1" "12"?

The reason my Editor libraries add row_ as a prefix is that it makes it a valid HTML4 and CSS id. An id starting with a number is not a valid id. It means that extra work needs to be done to add and remove the prefix, but it does help.

Why does the ID not in the HttpResponse Parameters?

It looks like it is - in the DT_RowId parameter.

Allan

Chimaira

How i can send form Client-Side to the Server extra Parameters like TableName?

allan

Use the ajax.data option. For DataTables' requests use ajax.data.

Allan