Hide datatable rows by using buttons that are inside the datatable

kthorngren

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.

Kevin

DSalso

Thanks, Kevin!!! @kthorngren I better study up! (I'm new to AJAX too) I appreciate the info and help.

colin

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.

Colin

DSalso

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
});

kthorngren

I'm not sure how to add html for an entire row vs all the cells in a particular column.

Try createdRow or if the data changes causing the form to change then use rowCallback. I've not tried this so not sure how well it will work.

So the AJAX request only happens once per table load (i.e. every time the page refreshes by default), correct?

Yes, until you enable server side processing.

Kevin

DSalso

EXCELLENT, thanks @kthorngren !!

DSalso

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

kthorngren

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

DSalso

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)

DSalso

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

colin

I think Kevin posted the wrong link - I suspect he meant this one: http://live.datatables.net/goqoqumu/4/edit

Colin

DSalso

Thanks, @kthorngren and @colin !!!

DSalso

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