How to Displaying Data in a Dynamic Table in Dreamweaver
Displaying data in a dynamic table
In a previous video, I showed how to display data using a repeating region. There's another approach, which is to generate a dynamic HTML table. For this demonstration, I'll use a file named explorerlist.php, which you'll find in the Explorers folder of the current site. This file doesn't currently have any record sets, so I'll add one. It doesn't matter where the cursor is if you're looking at it in Code view, all of the code for the recordset will always go at the top of the page with a little bit of PHP code at the end.
With the page open, I'll go to the Bindings panel and click the plus button and choose Recordset query. Make sure you're in the simple version of the Recordset builder. I'll name my new recordset rsExplorers. The Connection should be set to explorecalifornia, and the Table to explorers. I'll click the Selected radio button, hold down the Ctrl key on Windows or the Command key on Mac, and choose explorerId, firstName, lastName, dob and email.
I'll test my recordset and see that it comes back in numeric order by primary key, but I'd really like it in order by lastName. So I'll click OK, and then change the Sort to lastName, and I'll test again. And now it's coming back in lastName alphabetical order. I'll click OK and click OK to insert the recordset into my page. Now I'm ready to insert the dynamic table. I'm still in Code view.
I'll scroll down the page until I find where I want to place the table. There is an h1 tag set that currently is at line 71 in my version of the file. I'll place the cursor after the heading1 tags and then add in a paragraph tag set by pressing Ctrl+Shift+P on Windows or Command+Shift+P on Mac. The Dynamic Table tool really only works well when you're in Design view, so I'm going to leave the cursor in that exact location, and then go to Design view and then I'll insert the dynamic table.
You can do this from the menu by choosing Insert > Data Objects > Dynamic Data > Dynamic Table. There's also an option in the Insert panel. I'll use this menu choice, and in the Dynamic Table tool dialog, I'll verify that the rsExplorers recordset is selected, it's the only one in this page, and then I'll choose All records. I'll set the Border to 0 and leave the Cell padding and Cell spacing alone. These are values that I'll prefer to set later using cascading style sheets, and then I'll click OK.
The dynamic table is added automatically in the exact location where I had my cursor. I'll save the changes by pressing Ctrl+S on Windows or Command+S on Mac and then I'll go up to Live View and copy the file over to the server, and here's the result. The data is retrieved from the server and displayed in a dynamic HTML table. I'll do a little bit of editing and formatting. I'll exit Live View, and first I'm going to delete the column that shows the primary key.
I'll click into the first cell in the column and then drag down to the second. I'll release the mouse button and press Delete. I'll change the headings; by default the heading show the exact column names. I'd like to show more friendly information, so I'll change the firstName column header to First Name, lastName to Last Name, dob to Birthdate and for email, I'll simply capitalize the first character, Email.
I'll also click in the first cell of the row and then drag to the last cell and release, then in the Properties panel I'll click Header, and that turns those into TD tags in the HTML. I'll save the changes, and then go to Live View again, copying the file to the testing server and I'll see that my dynamic table is now much more friendly and easy to look at.
WordPress DIY: Community Website66,232 Views
Code Clinic: Ruby80,050 Views
Squarespace 7 Intermediate Techniques42,465 Views
Adobe Color Essential Training20,325 Views
Up and Running with Backbone.js160,931 Views
PHP with MySQL Essential Training4,283,533 Views
Illustrator CC 2013 One-on-One: Fundamentals1,678,359 Views
PHP with MySQL Beyond the Basics2,284,490 Views