How to make single, local column editable
How to make single, local column editable
pmconsulting
Posts: 36Questions: 11Answers: 0
Looking for advice. I'm using datatables as a way to give sales reps the ability to generate and save price lists. The source data comes from WordPress. Sales reps can adjust pricing within a percentage. I do not need to save those changes back to WordPress. Sales reps can save price lists using a function I added to stringify the table contents and save them for individual reps for later work. When the sales rep decides the price list is ready to send, the state is locked and saved so that the price list sent cannot change despite changes to WordPress data in the future.
I need to allow sales reps to change the price column locally in the datatable only. I do not need AJAX or any other function to send these changes back to the server as they are saved with the entire table contents.
What is the best method for doing this? I realize I can purchase a license for Editor, however, I am worried about adding that entire code base for what is a relatively simple capability. I think I can add a form input to the cells in the editable column, but I don't know how that affects saving table contents. I might need some additional function to replace inputs with the values in each of those inputs prior to saving.
Has anyone encountered this? What do you recommend?
This question has an accepted answers - jump to answer
Answers
I should clarify that I'm saving the edited contents of the entire table as a single string into a single field of a custom post for storing price lists by sales rep. The page with the editable datatable also has a form for saving with hidden fields for those functions. I use jQuery to grab, stringify and populate the field for table data and all of that is working as I need it to.
To understand this better, what would happen if the sales rep refreshes the table with the local edits? Would you expect it to revert back to what's in the database? Or should it preserve the edits?
Colin
That would blow away the edits, unless he clicked a save button, which will stringify & store the edited contents. Sales reps will have any number of tables they are working on. They will log in, choose or add a customer, then begin making a price list for that customer. Prices lists all have a valid period of 30 days. I'm not yet sure if I should allow more than one working table per client.
If you don't want to use Editor, perhaps something like jEditable would do the job for you. Hook it in so that when you click on it, it makes the cell editable, and then when that input is "submitted" update the cell's data with
cell().data()which will recalculate the DataTable.Allan
Thanks, allan! That looks perfect. You have to love JavaScript & jQuery. That these solutions are well written, tested & maintained is good for humanity. Thanks!
Seems that datatables prevents defaults on any input fields I place in cells. A simple jQuery listener never fires. That would actually make sense so I might be forced to use Editor.
Datatables doesn't prevent this. You may need to use delegated events as shown in this example. Please post a test case showing what you are doing if you need help debugging.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
kthorngren - Thanks! The sample code in that example did the trick. Now I have access to the row data. Perfect!