DataTables Editor and Django
DataTables Editor and Django
sehughes
Posts: 4Questions: 1Answers: 0
I have successfully implemented the DataTables Editor Bootstrap example from this site in my Django project. I use a forloop.counter to identify each row. That populates to popup as shown in the attached image.
<tbody>
{% for row in queryset %}
<tr id=forloop.counter> <!-- Needed for DataTables row identification -->
<td>{{ row.code }}</td>
<td>{{ row.description }}</td>
</tr>
{% endfor %}
</tbody>
Successful only so far I should say...
My problem is I do not know how to replace the PHP code in the example provided on this site with something that will achieve the same result in Django. The disconnect for me is how to setup the Ajax, JSON, etc. I can get Ajax to work in Django using a Django form with it's own submit button, but I've not figured out how to do same with the DataTables Editor form (see image) and the JSON part.
The solution is likely trivial and I'll kick myself once I see it, but I've not been able to locate anything on the Internet, in the forums, etc. that speaks to this.
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
$(document).ready(function edit_skus() {
var editorCM = new $.fn.dataTable.Editor( {
//ajax: "",
table: "#theader",
fields: [ {
label: "CODE:",
name: "CODE"
}, {
label: "DESCRIPTION:",
name: "DESCRIPTION"
}]
} );
if ( !$.fn.dataTable.isDataTable( '#theader' ) ) {
var table = $('#theader').DataTable( {
lengthChange: false,
//ajax: "",
columns: [
{ data: "CODE" },
{ data: "DESCRIPTION" }
],
select: true
} );
}
// Display the buttons
new $.fn.dataTable.Buttons( table, [
{ extend: "create", editor: editorCM },
{ extend: "edit", editor: editorCM },
{ extend: "remove", editor: editorCM }
] );
table.buttons().container()
.appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
$('#theader tfoot th').each( function () {
var title = jQuery(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// Apply the search
table.columns().every( function () {
var that = this;
$('input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This question has an accepted answers - jump to answer
Answers
You currently have the
ajaxoption commented out in your Ajax configuration. I'm afraid that is not currently valid with Editor (it will be with 1.6, which should be out later this summer) - Editor needs to make an Ajax request with each create, edit or delete command.The HTTP parameters sent to the server and the JSON expected back are documented in the Editor manual. Happy to answer any questions you might have about it.
Allan
I have the Ajax commented out because I've not implemented it yet based on the fact I'm unclear how to do so not using PHP or .NET, but Django.
I cannot find anything, anywhere, that explains what I need in the Editor manual. There are way too many assumptions and too cryptic of examples to get the big picture. Sorry, don't mean to be difficult, but the Editor feature is paramount and that is why I purchased a license.
What I do not quite seem to be able to find is examples of the glue, between my HTML and my edited version your Bootstrap Editor javascript example I included in the query. So, I edit the row, as shown in the image snippet I provided, and click update. It is the code that would take that edit and write it back to my DB that I need to understand. Reading/Writing to my DB in Django I can do, but the hook to your popup form eludes me.
Also, in your bootstrap example? The line ajax: "../php/staff.php"? Is that a reference to the PHP code shown in the Server Script tab?
Use the
ajaxoption to tell Editor where to submit the Ajax request with the edited data. That URL should accept data in the format detailed in the manual and perform whatever actions are required to update the database and then return the JSON to the client-side.Does that clarify things a bit or just muddy the water more? The edited data has to be submitted somewhere so it can be saved and the
ajaxoption should be the URL where to make the Ajax request to save that data. In the examples that happens to be a PHP script, but it could be a Perl script, Python, Ruby, Go, anything.Allan
So, for example, if I passed back to the ajax Option ajax: /somepath/somecode.py where the somecode.py script perfroms the same function as the staff.php script I'm on the right track?
Exactly that! You can direct it to any script / route you want and that script should then update the database.
Allan
Hi Alan,
Been away for a time and just recently revisiting this. Still no luck. Exasperating. If to start over I would have given up long ago and gone with another option. The Editor feature is super important however. I've been unable to get any useful help on StakOverflow or in this forum. Just too much involved that is assumed maybe. Not sure. By the way? The ajax: /somepath/somecode.py query from my last email to you, That did not work.
Maybe you can help me this way. When you select the Edit button and the Modal pops up it has an Update button. When I inspect that Update button it has no ID. Say I wanted to execute something of my own when that Update button is clicked on? How would I do that?
Happy to help - sorry you are finding this exasperating! I'm afraid I know nothing about Python so I can't really help in that aspect, but I can certainly help with what Editor sends to the server and what it expects back.
No - the row id is stored by Editor in Javascript since it doesn't need to hit the DOM. The row id is sourced from whatever property the
rowIdoption points to (the default isDT_RowId). The value found in that property is the one that is submitted as the row's identifier (i.e. the value in the object / associative array submitted to the server.Do you want to completely override the Ajax call Editor makes? If so, use
ajaxas a function. That way you can replace it with anything you want. The data given to it and the data passed to the callback still need to conform to the client / server communication that Editor uses, but you can use anything you want as the data store using that method.Allan
I'm diving into this right now.
Literally, I just purchased the license for editor, downloading now ... and my project is Django/python/mysql
Django/python does ajax. (ajax is just a urls.py config, with a views.py function/class, which returns a response with associated json data in a serialized format).
Ajax is just a normal HTTP connection and request (GET, POST) with an additional HTTP header set (XHDR).
You can ignore or use that header. Either way, just respond properly, and the caller function will be happy. e.g., set a success of fail code, json data, then respond (HttpResponse).
So, the trick, for me, is coordinating with the editor (frontend) requests. I'm going to read the PHP example and the editor manual.
My going-in assumption is:
The backend views.py code would need to match the editor identifier to the Model + field that is being edited ... validate (user permissions? is that a valid value?) ... perform the action (object.field = 'newvalue'; object.save() ) ... and set return codes (200 success) .. and burp out the view (json data)
Again -- I assume the PHP code will be illuminating.
i'm using Python and CherryPy for my backend and found it pretty easy to integrate with the Editor. The key thing is understanding this client / server interaction and parsing the requests in Python. With CherryPy I simply
return json.dumps( dictionary )in response to the request.Never used Django so can't help there :-)
Kevin
Pero dejar de usar django es mala idea ya que este es muy bueno se que php funciona pero los que estamos usando python y django seria de mucha utilidad poder actualizar los datos del editor