What I'm not sure about is how to access the "data" variables that I set within "function format(d)". I'm guessing I need to open that row's data to access those elements?
I'm not sure what your code snippets are doing without more context or actually seeing it. Is this the code you are asking about and does it not work?
Would become something like this:
var row = table.row(".selected")
var data = row.data();
let decision = data.json_decision != "" ? data.json_decision : json_data[0].dcsn;
I would use the browser's debugger to step through the code in question to see where it breaks.
var row = table.row(".selected")
Possibly the selected class has been removed at this point so the variable row doesn't contain a row.
Maybe you can create a test case or update mine that simulated the save option so we can help debug.
I believe I will need another variable from the server so that I know if the STATUS column is an already Saved row or if it's a Saved row within the current session.
I can't rely just on STATUS because if the value is "Saved" and that value is from the server than "data.json_decision" won't exist in the data. The data "data.json_decision" will only exist in the data if STATUS has been changed to "Saved" within the session.
If STATUS = Saved and that data is being returned from the server then decision should be this: let decision = json_data[0].dcsn;
If STATUS = Saved and it's within the session then decision should be this: let decision = data.json_decision;
How would I know if STATUS = Saved is from the server or STATUS = Saved is from the session. I guess I need an EXISTS "data.json_decision" to see if that data is within the row. Another column from the database would tell me if STATUS = Saved is from the server or not.
If STATUS = Saved and FROM_SERVER = Y then let decision = json_data[0].dcsn;
If STATUS = Saved and FROM_SERVER = N then let decision = data.json_decision;
This logic would be within the format(d) function.
function format(d) {
let json_data = JSON.parse(d.JSON_DATA) ? JSON.parse(d.JSON_DATA) : "";
let json_data_extra = JSON.parse(d.JSON_DATA_EXTRA) ? JSON.parse(d.JSON_DATA_EXTRA) : "";
let decision = json_data[0].dcsn ? json_data[0].dcsn : "";
Make sense? Not all the Saved rows will have "data.json_decision", unless, there's a way to include "data.json_decision" for every row and then it's just a logic decision to see if "data.json_decision" is null or not.
I believe I will need another variable from the server so that I know if the STATUS column is an already Saved row or if it's a Saved row within the current session.
Sorry I don't understand your solution, the code flow and our data structures so I probably won't be much help. I don't understand the difference between a "Saved row" and "Saved row within the current session".
I would try to keep the data at the client in sync with the data at the server. When initializing Datatables the ajax request should return the row data (shown in the HTML table) along with the form / hidden data for that row. Possibly that form data is empty or has default values if the child row form has never been edited / submitted. When the user submits the changes the ajax request is sent to save the data. I would probably have a successful response include the data written to the DB (use a query for that record to return to the client) and use that response's JSON data to update the row's data object. The next time the child row is open it should have data that reflects what is stored at the server. This way you don't need to know if the data was saved or from the session to determine what to display.
Again I'm not familiar with your requirements so my suggestions might not be applicable.
"I don't understand the difference between a "Saved row" and "Saved row within the current session".
A "Saved row" would have "Saved" as a value for STATUS column when retrieving the data from the database to build the DataTables grid. All other rows would have a NULL value for STATUS column, meaning, that row of data has not been saved to the database or submitted to the server.
A "Saved row within the current session" would initially have a NULL value for the STATUS column when retrieving the data from the database to build the DataTables grid. The STATUS column value would only change to "Saved" when the Form data is submitted to the server when the "Save" button is clicked. At that point, the STATUS column in the grid changes to "Saved". Reloading the DataTables grid would then show a value of "Saved" within the STATUS column of the grid.
Each row has JSON data that is parsed to get all the values that populate the form. A lot of the data is static but some elements are selected.
If the STATUS column has a value of "Saved" and that value came from the server then all that is needed is the JSON data.
If the STATUS column has a value of "Saved" and was changed to that within the current session, not pulled from the server when the grid was built, then the JSON data is needed to populate the form along with the changed data in data.json_decision.
So, I can't just look at the value in STATUS because I don't know if that value came from the server or was changed to "Saved" in the code when the "Save" button was clicked.
Mostly makes sense. I suppose I don't need to know the full details to help with Datatables questions / issues. My understanding of the last question asked is how to access the row data in the format() function. The d parameter should contain the row's data from this call row.child(format(row.data())).show();. All the data for the row, including the form data you added, should be accessible using the d variable.
Does this answer your questions?
If not please provide more details like what happens and what errors are generated with what you are trying. Probably will need to see more code to get a better context of what is happening. Better is a test case replicating the issue so we can step through and debug. https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Ok, I got this all working. Thank you so much for your help. I wouldn't have been able to pull this off without your help. Much appreciated.
Couple things to note.
Having the following in my FETCH THEN response caused an error.
var row = table.row(".selected")
var data = row.data();
data.STATUS = "Saved";
data.json_decision = json_decision;
row.data(data);
row.child.hide();
**row.child(format(row.data())).show();**
Error ReferenceError: **format is not defined**
This seemed to resolve that error:
var row = table.row(".selected")
var data = row.data();
data.STATUS = "Saved";
data.json_decision = json_decision;
row.data(data);
row.child.hide();
**table.draw(false);**
If you click in the second header (the area left of the search box for Message Code) where the ICON would be then you get the following error:
TypeError: can't access property "ROW_NUMBER", d is undefined
What can I do to not get that error if someone just happens to click that area?
Also, is there a way to not show the HTML table BEFORE the DataTables is shown? It appears that the HTML table is shown for 5-10 seconds before the DataTables styling kicks in.
That suggests the format() function is not defined in a scope that line 8 a access to. You might need to move it into the global scope.
TypeError: can't access property "ROW_NUMBER", d is undefined
I think ColumnControl creates td elements in the header. You might need to make the selector in the click event more specific, like this:
table.on('click', 'tbody td.dt-control', function (e) {
Note the addition of tbody.
Also, is there a way to not show the HTML table BEFORE the DataTables is shown?
When you say HTML table do you mean just the header and footer or do you see table rows?
When using ajax the header and footer of the table defined in HTML is visible until the Ajax response when Datatables can load the table data. If this is the case then hide the HTML with display: none; using the style attribute on the table. Use the ready() API to remove that CSS from the table tag. api ready() will execute when the Datatable is completely initialized.
Datatables should show the elements like search and paging while waiting for the Ajax response. Something like this example with a 5 second delay: https://live.datatables.net/socirone/74/edit
But it sounds like you don'e see any of the Dattaables elements or formatting for 5 seconds. Is this correct? If this is the case then it sounds like there might be a delay in getting to the code that initializes Datatables.
The first place I would look is to use the browser's network inspector to see when Datatables sends the XHR request and how long it takes for the response.
Just seems odd to see that and then it disappears
If the HTML table is displayed then disappears then I suspect there is something else on the page doing this. I've never seen Datatables just remove the table.
I guess more investigation is need to determine where the delay is and why it seems the table disappears.
You're right. I have a FETCH statement that runs first to obtain all the Radio button options along with the Dropdown options, then I run DataTables.
I do this so that all the javascript variables are set when DataTables is initialized so when a user clicks the ICON the form is shown with all the elements (Radio buttons, Dropdowns) on that page.
I suppose I could flip that around and see what happens. Run DataTables and then in the response run the FETCH to obtain the Radio Buttons and Dropdown options.
As I said you can hide the -table or better the div the table is in, so you don't see the Datatables elements, then use ready() to show the table or div.
Changing the order may work. You can always use something like BlockUI to keep the user from interacting with the page until everything is loaded.
For the format() function and the row.child(format(row.data())).show(); statement, I didn't realize the format() within the row.child() was using the format() function. Never really paid much attention and thought it was just part of the row.child() statement. That makes sense now.
Is there a way to remove the search text box in the ColumnControl? There's only 6 choices so don't really need a search text box for that dropdown.
Oh, I see. You just want to remove the text input but leave the dropdown list. Thought you wanted to remove the whole element. I don't believe there is an option to remove the text input.
Replies
I don't fully understand your question or issue. Yes use
row().data()to get the row's data object. Similar to the example I created earlier:https://live.datatables.net/socirone/72/edit
I'm not sure what your code snippets are doing without more context or actually seeing it. Is this the code you are asking about and does it not work?
I would use the browser's debugger to step through the code in question to see where it breaks.
Possibly the
selectedclass has been removed at this point so the variablerowdoesn't contain a row.Maybe you can create a test case or update mine that simulated the save option so we can help debug.
Kevin
Typically
dpassed intoformat(d)is the row's data. Have you looked atdto see if it has the data you are looking for?Kevin
I believe I know what might be happening.
I believe I will need another variable from the server so that I know if the STATUS column is an already Saved row or if it's a Saved row within the current session.
I can't rely just on STATUS because if the value is "Saved" and that value is from the server than "data.json_decision" won't exist in the data. The data "data.json_decision" will only exist in the data if STATUS has been changed to "Saved" within the session.
If STATUS = Saved and that data is being returned from the server then decision should be this: let decision = json_data[0].dcsn;
If STATUS = Saved and it's within the session then decision should be this: let decision = data.json_decision;
How would I know if STATUS = Saved is from the server or STATUS = Saved is from the session. I guess I need an EXISTS "data.json_decision" to see if that data is within the row. Another column from the database would tell me if STATUS = Saved is from the server or not.
If STATUS = Saved and FROM_SERVER = Y then let decision = json_data[0].dcsn;
If STATUS = Saved and FROM_SERVER = N then let decision = data.json_decision;
This logic would be within the format(d) function.
Make sense? Not all the Saved rows will have "data.json_decision", unless, there's a way to include "data.json_decision" for every row and then it's just a logic decision to see if "data.json_decision" is null or not.
Sorry I don't understand your solution, the code flow and our data structures so I probably won't be much help. I don't understand the difference between a "Saved row" and "Saved row within the current session".
I would try to keep the data at the client in sync with the data at the server. When initializing Datatables the
ajaxrequest should return the row data (shown in the HTML table) along with the form / hidden data for that row. Possibly that form data is empty or has default values if the child row form has never been edited / submitted. When the user submits the changes the ajax request is sent to save the data. I would probably have a successful response include the data written to the DB (use a query for that record to return to the client) and use that response's JSON data to update the row's data object. The next time the child row is open it should have data that reflects what is stored at the server. This way you don't need to know if the data was saved or from the session to determine what to display.Again I'm not familiar with your requirements so my suggestions might not be applicable.
Kevin
"I don't understand the difference between a "Saved row" and "Saved row within the current session".
A "Saved row" would have "Saved" as a value for STATUS column when retrieving the data from the database to build the DataTables grid. All other rows would have a NULL value for STATUS column, meaning, that row of data has not been saved to the database or submitted to the server.
A "Saved row within the current session" would initially have a NULL value for the STATUS column when retrieving the data from the database to build the DataTables grid. The STATUS column value would only change to "Saved" when the Form data is submitted to the server when the "Save" button is clicked. At that point, the STATUS column in the grid changes to "Saved". Reloading the DataTables grid would then show a value of "Saved" within the STATUS column of the grid.
Each row has JSON data that is parsed to get all the values that populate the form. A lot of the data is static but some elements are selected.
If the STATUS column has a value of "Saved" and that value came from the server then all that is needed is the JSON data.
If the STATUS column has a value of "Saved" and was changed to that within the current session, not pulled from the server when the grid was built, then the JSON data is needed to populate the form along with the changed data in data.json_decision.
So, I can't just look at the value in STATUS because I don't know if that value came from the server or was changed to "Saved" in the code when the "Save" button was clicked.
Hope that clears that up for you.
Mostly makes sense. I suppose I don't need to know the full details to help with Datatables questions / issues. My understanding of the last question asked is how to access the row data in the format() function. The
dparameter should contain the row's data from this callrow.child(format(row.data())).show();. All the data for the row, including the form data you added, should be accessible using thedvariable.Does this answer your questions?
If not please provide more details like what happens and what errors are generated with what you are trying. Probably will need to see more code to get a better context of what is happening. Better is a test case replicating the issue so we can step through and debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Doh!!
"All the data for the row, including the form data you added, should be accessible using the d variable."
Instead of this:
It just needs to be this:
Ok, I got this all working. Thank you so much for your help. I wouldn't have been able to pull this off without your help. Much appreciated.
Couple things to note.
Having the following in my FETCH THEN response caused an error.
This seemed to resolve that error:
If you click in the second header (the area left of the search box for Message Code) where the ICON would be then you get the following error:
TypeError: can't access property "ROW_NUMBER", d is undefined
What can I do to not get that error if someone just happens to click that area?
Also, is there a way to not show the HTML table BEFORE the DataTables is shown? It appears that the HTML table is shown for 5-10 seconds before the DataTables styling kicks in.
That suggests the
format()function is not defined in a scope that line 8 a access to. You might need to move it into the global scope.I think ColumnControl creates
tdelements in the header. You might need to make the selector in the click event more specific, like this:Note the addition of
tbody.When you say HTML table do you mean just the header and footer or do you see table rows?
When using
ajaxthe header and footer of thetabledefined in HTML is visible until the Ajax response when Datatables can load the table data. If this is the case then hide the HTML withdisplay: none;using thestyleattribute on thetable. Use theready()API to remove that CSS from thetabletag.api ready()will execute when the Datatable is completely initialized.Kevin
FYI I started this thread to see if Allan wants to update the Child Detail Row examples to add
tbodyto the selector.Kevin
"When you say HTML table do you mean just the header and footer or do you see table rows?"
Just the header and footer. Just seems odd to see that and then it disappears. It kind of makes you think something is wrong.
Datatables should show the elements like search and paging while waiting for the Ajax response. Something like this example with a 5 second delay:
https://live.datatables.net/socirone/74/edit
But it sounds like you don'e see any of the Dattaables elements or formatting for 5 seconds. Is this correct? If this is the case then it sounds like there might be a delay in getting to the code that initializes Datatables.
The first place I would look is to use the browser's network inspector to see when Datatables sends the XHR request and how long it takes for the response.
If the HTML table is displayed then disappears then I suspect there is something else on the page doing this. I've never seen Datatables just remove the table.
I guess more investigation is need to determine where the delay is and why it seems the table disappears.
Kevin
You're right. I have a FETCH statement that runs first to obtain all the Radio button options along with the Dropdown options, then I run DataTables.
I do this so that all the javascript variables are set when DataTables is initialized so when a user clicks the ICON the form is shown with all the elements (Radio buttons, Dropdowns) on that page.
I suppose I could flip that around and see what happens. Run DataTables and then in the response run the FETCH to obtain the Radio Buttons and Dropdown options.
As I said you can hide the -
tableor better thedivthe table is in, so you don't see the Datatables elements, then useready()to show thetableordiv.Changing the order may work. You can always use something like BlockUI to keep the user from interacting with the page until everything is loaded.
Kevin
Working through your suggestions.
For the format() function and the row.child(format(row.data())).show(); statement, I didn't realize the format() within the row.child() was using the format() function. Never really paid much attention and thought it was just part of the row.child() statement. That makes sense now.
Is there a way to remove the search text box in the ColumnControl? There's only 6 choices so don't really need a search text box for that dropdown.
See if this example helps.
Kevin
I didn't see anything that would remove the search input box.
Oh, I see. You just want to remove the text input but leave the dropdown list. Thought you wanted to remove the whole element. I don't believe there is an option to remove the text input.
Kevin
Might be a nice enhancement. For short lists like mine, don't really need a search box when only a few values are shown.
Thanks.
The
searchoption for the-content searchListcontent type can be used to disable (and remove) the search box.Allan