DT Server-Side Bootstrap 4 CSS Styled Modal Content Examples
DT Server-Side Bootstrap 4 CSS Styled Modal Content Examples
mxsquid
Posts: 16Questions: 3Answers: 0
Any great references here? Been away from DataTables for a while and trying to come up to speed. Tried "Search" but too many results came up. Thanks.
This discussion has been closed.
Replies
There are a few threads that have examples: here, here and here.
Colin
Thank you for your reply Colin!
Here is a CodePen example I used to demonstrate Bootstrap 4.5.2 styling to achieve a no frills, Large Fading Modal with CSS using jQuery.
For my DataTables Server_Side project, I'm able to successfully access row data elements (e.g. data[0]. data[1] ... )
Now I want to populate the modal as in the example below by simply calling on jQuery from DataTables with the appropriately formatted data[] items. e.g. name, address, phone-number.
This should not be hard to achieve, but I'm stumped.
Thanks for your help
https://codepen.io/mxsquid/pen/wvdZzXv
I don't see a table in your example or DataTables being imported, so I've added both here: https://codepen.io/mxsquid/pen/wvdZzXv .
Allan
Hi Allan, thanks for your reply. However I didn't see any changes to my 1st CodePen.
The following Bootstrap 4 output is what I'd like to achieve using your DataTables Modal example. https://codepen.io/mxsquid/pen/RwVOgKV
From your original documentation:
https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html
I'm successfully using DataTables 1.10.6 in Server_Side mode to get to row data values such as you demonstrated by clicking on a data[ ] field as in the above example.
I want to upgrade to current (responsive) DataTables using Bootstrap 4 from my current use of jsPanel-1.11.0 to create my modal display.
Using the example of my CodePen, what I'd like to see is as follows:
Header Company Roster
Body: Angelica Ramos, Chief Executive Officer (CEO) based in London
E-mail: a.ramos@datatables.net
h4 data[ 1 ] + " " + data[ 2 ] + ", " + data[ 3 ] + " based in " + data[ 4 ]
h6 "Email: " + data[ 9 ]
Assuming SQL unique id is data[ 0 ]
First name: Angelica
Last name: Ramos
Position: Chief Executive Officer (CEO)
Office: London
Age: 47
Start date: 2009/10/09
Salary: $1,200,000
Extn.: 5797
E-mail: a.ramos@datatables.net
https://codepen.io/mxsquid/pen/RwVOgKV
Thanks in advance for your kind help in achieving this.
I'm not seeing any use of DataTables in your example. Are you saying you want someone to write the code for you?
tangerine, I've explained that I want to upgrade from DataTables 1.10.6 to current responsive DT-1.10.25 plus the ability to do server_side sql processing to dynamically achieve Boostrap 4 Modal displays on a user keypress. Currently I use jsPanel 1.11.0 for modal displays (that are not responsive) for smartphone displays.
I'm perfectly able to follow programming instructions, however there seems to be a lack of documentation on how to achieve this from DataTables examples I've seen.
The CodePen I pointed to shows how I made it work using jQuery. I'm simply not understanding what I need to do to have it work using DT server_side calls
Darn - I must have forgotten to click the save button in CodePen. I had a DataTable inside the model, but reading over your further comments, that might not be what you want. It sounds like you have a DataTable, and then want to show a modal when you click on a row, showing the information from that row. Is that correct?
If so,
. It will get the data from a row for you - see this example. From there it is a case of populating the Bootstrap model (using any method you want - a template, DOM elements, whatever).
row().data()is your friendI'm not fully understand what you are looking for I'm afraid. Do you need server-side processing, or are you just loading data from a table? Are you showing the table on the page and then launching the modal from it, or the table is being shown inside the modal? Apologies for the questions - it is probably really obvious, but it isn't quite clicking for me
Allan
Using Allan's original documentation on DT + Bootstrap modals:
https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html
Here's my solution to the issue of dynamically updating Bootstrap 4 Modal Content via JavaScript. For me, the use of this is to transform row()data() from SQL, create an array such as the data{] example above and then create a responsive, large modal display which includes adjusting font sizes and line centering for optimal viewing on desktop and mobile displays.
Using the Angelica Ramos example above
str1 = "
" + data[ 1 ] + " " + data[ 2 ] + ", " + data[ 3 ] + " based in " + data[ 4 ] + "
" + "\n\n" + "
" + "Email: " + data[ 9 ] + "
";
The demo below assumes data[0] is the unique SQL row id.
My next step is to replace my live DataTables 1.10.6 application with something similar to my CodePen below.
Hope this is useful information.
https://codepen.io/mxsquid/pen/MWogOwp