Running Datatables with a Python Back-End

joshusre

First and foremost, thank you for all your work on this. It's a phenomenal product.

My question relates to hosting a webpage with datatables via a python web server (Tornado in my case). Without going into a lot of detail, my app uses websocket to communicate between the front end and back, all over local host (very long story).

This works great for my use case and works very well with datatables in a read only fashion, as I'm able to fire the relevant data at the front end and load it into my datatables using API calls. My problem is how do I extend this into the editable / Editor realm.

1 Is it advisable to try and create the back end necessary to give datatables what it needs via AJAX?

2: Should I expose end points and go the REST route and expose end points for AJAX to use to delete, create, post, etc?

Is there a better way?

Josh

kthorngren

My projects use Python and CherryPi. I've not used Tornado. It looks interesting.

I built a backend that uses a fairly standard Datatables environment with AJAX. Seems to work well for what I am doing. I had to determine the best way to parse the data from the editor, data[row_29][last_name] for example, for my code to determine the PKID, etc. Returning the response is a matter of using json.loads to build the JSON response from the Python dictionary containing the row data being returned.

Let me know if you have any questions. I'm not a developer by trade but will try to help as much as I can.

Kevin

allan

You don't have to use Ajax requests with Editor - you can use a WebSocket if you prefer. The key to that is to override the default ajax option by providing your own function. That function should make whatever calls are required to pass the data to the server (possibly reformatting it if needed, inline with what Kevin notes) and (importantly) get the required data back.

The client / server data interchange is documented in the manual.

When using Ajax makes this easier is that each request has its own response. With a WekSocket you have a single socket which will get all responses back, so you will need to frame it correctly (i.e. put a timestamp on the request and then have that included with the response so you can call the correct Editor callback function).

Allan

joshusre

Thank you everyone for your replies.

Let me try some of these suggestions and see what catches on fire. Stay tuned

joshusre

So my first attempt is as follows:

1 Cache data in the browser (its not much, less than 1k rows between 8 tables)

2 init this editor example

https://editor.datatables.net/examples/advanced/localstorage.html

3 Pass in the data.

Is this a reasonable approach? Also, is there an API call in Editor analogous to the one in
datatables:

jquery_selector_of_table.row.add(my_row).draw(false)

or must I have my data cache and ready before editor init?

allan

That's a reasonable approach. The downside is that the data on the server is more likely to be out of sync with what is on the client-side.

The Editor create() method will create a row and then use row.add() itself to add it.

Allan

joshusre

init

    editor = new $.fn.dataTable.Editor( {
        table: "#hu_params_table",
        "idSrc": "edtior_id",
        fields: [ {
                name: "p_name"
            }, {
                name: "p_val"
            }
        ]
    } );
    // Activate an inline edit on click of a table cell
    $('#hu_params_table').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );
    hu_param_table = $('#hu_params_table').DataTable({
        "initComplete": function(settings, json) {sendMessage('reporting:hu_param_table')},
        "iDisplayLength": 20,
        "lengthMenu": [10, 20, 25, 50, 75, 100],
        autoWidth: false,
        columns : [
            {width : '10%', 'targets':0, data: "p_id"},
            {width : '40%', 'targets':1, data: "p_name"},
            {width : '50%', 'targets':2, data: "p_val"}
        ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    });

websocket fires nested array at client, and the nested array fed in via (more or less)

        for (var hu_param in headunit_param_array) {
            if (!headunit_param_array.hasOwnProperty(hu_param)) continue;
            param_ready = eval(headunit_param_array[hu_param]);
            console.debug(param_ready);
            col_id = param_ready[0];
            param_id = param_ready[1];
            param_name = param_ready[2];
            param_val = param_ready[3];
            prepped = {
                "edtior_id": col_id,
                "p_id": param_id,
                "p_name": param_name,
                "p_val": param_val
            };
            hu_param_table.row.add(prepped).draw();
        }

And I have editor up and capable of editing the fields I want "p_name, p_val"

I may have some moar questions with regard to edtiing and custom styling, but that's probably for another thread.

Thanks for your help Allan.