Open a modal window over DataTables with a Datatable in it
Open a modal window over DataTables with a Datatable in it
fapworx_gmail
Posts: 7Questions: 0Answers: 0
Hi (I'm new here)
Would it be possible to have a table A with an icon in the row. This icon, once clicked on, would open a modal window with another table B in it, this one with CRUD. The B table would display data related to the value of the clicked icon from table A. I then would like to be able to edit data within table B inside the modal, shut the modal and have table A redrawn with already updated data from action in table B.
A bit like the "Drill down" example but with modal..
A bit of hystory for this:
Over the years, I built an system to assist in the booking of artists for large music festivals in the UK. I made no money with it but I do get to go to the events for free and I get to bring my wife too...
Unfortunately, my of PHP and My Sql are limited to "procedural" and using MM and other open source JS a pretty well managed to deliver a comprehensive system saving the folks at the festivals hours of inputing data that could be taken care of by the actual tour managers, agents ect...
Discovering Datatables and Editor obviously changed my life and I am in the slow process of transfering my whole system to this beauty of creation.
I have no problems with the data, all very straight forward, very little filtering, no real issue with security, this side is OK.
I do sruggle though with the display of my data (remember, artists aren't always strong with logic).
I was using prebuilt scripts from MM Dreamweaver and would open a smaller browser window to display more data and use an on-close trigger to refresh the main page below. I got stuck with datatables. I'm sure this can be achieved with jquery just as well but how?
I hope it's not too much of a daft question.
Would it be possible to have a table A with an icon in the row. This icon, once clicked on, would open a modal window with another table B in it, this one with CRUD. The B table would display data related to the value of the clicked icon from table A. I then would like to be able to edit data within table B inside the modal, shut the modal and have table A redrawn with already updated data from action in table B.
A bit like the "Drill down" example but with modal..
A bit of hystory for this:
Over the years, I built an system to assist in the booking of artists for large music festivals in the UK. I made no money with it but I do get to go to the events for free and I get to bring my wife too...
Unfortunately, my of PHP and My Sql are limited to "procedural" and using MM and other open source JS a pretty well managed to deliver a comprehensive system saving the folks at the festivals hours of inputing data that could be taken care of by the actual tour managers, agents ect...
Discovering Datatables and Editor obviously changed my life and I am in the slow process of transfering my whole system to this beauty of creation.
I have no problems with the data, all very straight forward, very little filtering, no real issue with security, this side is OK.
I do sruggle though with the display of my data (remember, artists aren't always strong with logic).
I was using prebuilt scripts from MM Dreamweaver and would open a smaller browser window to display more data and use an on-close trigger to refresh the main page below. I got stuck with datatables. I'm sure this can be achieved with jquery just as well but how?
I hope it's not too much of a daft question.
This discussion has been closed.
Replies
Basically what you are looking for absolutely is possible. What you'd do is attach an event listener to the button in the base table (the button could be out in place using sDefaultContent ) that would trigger a modal. Use whatever modal library you like, or its easy to create an element with position:fixed that would do the business. Then populate the content with the HTML needed, including the table and initialise the the inner DataTable in exactly the same way as you would with any other table. The same applies to Editor - basically you just need to initialise the table, once it is in place, in the same way that is normally done in a document.ready function.
Obviously a little more work involved than my waffle, but in short - absolutely possible :-)
Allan
I'll give it my best try.
I just managed to make my JS work for the "open smaller browser window" over the table so now I'll look at the jquery version
I love this stuff:)