probably passes along the row id of the button that's pressed in the data attribute so the server can find the hidden rows.
I see your point. Yes, with SSP it expects only the rows displayed for the page.
I imagine you simply change the Python Flask view function to send data in AJAX format vs. serving up a template.
For a client side Ajax request yes. You would return the data and Flask will package it into a JSON formatted string or you can do it yourself with jsonify(). However with SSP the server script is responsible for sorting, searching and paging. Here is the Python script from one of the Django projects just to give you an idea.
As Kevin said, the serverSide is really only needed as a last resort for large datasets - if your data is small, it sounds like it'll create more headaches than it'll solve.
Thanks @kthorngren and @colin - totally agree, I'm hopeful that server-side processing will be 100% unnecessary. So far, using AJAX and client-side processing is going well in my experiments/learning (trying to teach myself before I roll it out to the app). A couple questions would really help me out if you have time:
1) Do you have an example or know of a way to wrap form tags around each row of the json data that datatables is getting via AJAX? This example Kevin provided me has helped in learning how to generate html in Datatables (both Javascript & Datatables & AJAX were new to me before this project). But thinking ahead, I'm not sure how to add html for an entire row vs all the cells in a particular column.
2) Even though I'm using AJAX and the deferRender option, I'm still sending all of the json data to Datatables at once since I'm not using server-side processing, correct? So the AJAX request only happens once per table load (i.e. every time the page refreshes by default), correct? (this is all I need but just wanted to confirm)
Here's my own example I've been hacking with:
$(document).ready( function () {
$('#dTable').DataTable( {
"ajax": {
"url": "/d2", // user clicks on a link to "/d1" which calls the Flask template with the table tag, etc. Then Datatables is getting JSON from database query at "/d2".
"dataSrc": "data"
},
"order": [],
"columns": [
{ "data": 0 },
{ "data": 1 },
{
render: function (data, type, row, meta) {
return '<input type="button" value="+" name="view_history" style="width:1.5rem; background-color:#7fbf7f; color:white; font-weight:normal; border:1px solid #979797; margin-right:.1rem"/>';}
},
{ "data": 3 },
{ "data": 4 },
{ "data": 5 },
{ "data": 6 },
{ "data": 7 },
{ "data": 8 },
{ "data": 9 },
{ "data": 10 },
{ "data": 11 },
{ "data": 12 },
{ "data": 13 },
{ "data": 14 },
{ "data": 15 }
],
"columnDefs": [
{"type": "html-input", "targets": [5,6,7,8,9,10,11,12,13]},
{"visible": false, "targets": [0,1]},
{"orderable": false, "targets": "_all"}
],
"deferRender": true
});
Hi, @kthorngren- sorry to bother you again but I can't explain why the other record in the code example below is not shown once the button is clicked. (I passed in javascript data instead of AJAX just for the example.)
Wow, thanks for the quick response. Sorry, @kthorngren , I don't see any difference between your code and mine. (Interested to learn how to put debugging in the console, tho)
Ohhhh, I see what you mean... the array position is based on the original source data and not the <td> position/how you fit it into the html..... maybe that's what's going on with my AJAX-based code in my app
form> tag inside a <tr> tag is not valid html (like I was doing in an earlier code example.) I found this link helpful and ended up using Ray (& Martlark)'s approach:
Answers
I see your point. Yes, with SSP it expects only the rows displayed for the page.
For a client side Ajax request yes. You would return the data and Flask will package it into a JSON formatted string or you can do it yourself with
jsonify(). However with SSP the server script is responsible for sorting, searching and paging. Here is the Python script from one of the Django projects just to give you an idea.Kevin
Thanks, Kevin!!! @kthorngren I better study up! (I'm new to AJAX too) I appreciate the info and help.
As Kevin said, the
serverSideis really only needed as a last resort for large datasets - if your data is small, it sounds like it'll create more headaches than it'll solve.Colin
Thanks @kthorngren and @colin - totally agree, I'm hopeful that server-side processing will be 100% unnecessary. So far, using AJAX and client-side processing is going well in my experiments/learning (trying to teach myself before I roll it out to the app). A couple questions would really help me out if you have time:
1) Do you have an example or know of a way to wrap form tags around each row of the json data that datatables is getting via AJAX? This example Kevin provided me has helped in learning how to generate html in Datatables (both Javascript & Datatables & AJAX were new to me before this project). But thinking ahead, I'm not sure how to add html for an entire row vs all the cells in a particular column.
2) Even though I'm using AJAX and the deferRender option, I'm still sending all of the json data to Datatables at once since I'm not using server-side processing, correct? So the AJAX request only happens once per table load (i.e. every time the page refreshes by default), correct? (this is all I need but just wanted to confirm)
Here's my own example I've been hacking with:
Try
createdRowor if the data changes causing the form to change then userowCallback. I've not tried this so not sure how well it will work.Yes, until you enable server side processing.
Kevin
EXCELLENT, thanks @kthorngren !!
Hi, @kthorngren- sorry to bother you again but I can't explain why the other record in the code example below is not shown once the button is clicked. (I passed in javascript data instead of AJAX just for the example.)
http://live.datatables.net/goqoqumu/2/edit?html,js,output
Added a little debugging (console.log) to the code and found you were accessing the wrong array position to get the name:
http://live.datatables.net/goqoqumu/2/edit
Kevin
Wow, thanks for the quick response. Sorry, @kthorngren , I don't see any difference between your code and mine. (Interested to learn how to put debugging in the console, tho)
Ohhhh, I see what you mean... the array position is based on the original source data and not the <td> position/how you fit it into the html..... maybe that's what's going on with my AJAX-based code in my app
I think Kevin posted the wrong link - I suspect he meant this one: http://live.datatables.net/goqoqumu/4/edit
Colin
Thanks, @kthorngren and @colin !!!
Helplful tip for others:
It looks like using a
<
form> tag inside a <tr> tag is not valid html (like I was doing in an earlier code example.) I found this link helpful and ended up using Ray (& Martlark)'s approach:
https://stackoverflow.com/questions/4035966/create-a-html-table-where-each-tr-is-a-form/15600151