Displaying conditional records from databse in Tabs in Codeigniter |
Hi there,
Here is what i want to do i have 2 tables Items: Item_id, price, cat_id, name, slug, pic_url Item_id Price Cat_id Name Slug Pic_url 1 12 1 Chicken meal Chi_meal url to its picture in harddrive 2 10 1 Fish Meal Fish_meal url to its picture in harddrive 3 7 2 Spring rolls Srolls url to its picture in harddrive 4 8 3 Caeasars Salad Csalad url to its picture in harddrive 5 6 3 Green Salad Gsalad url to its picture in harddrive 6 6 2 Tazaki Shrimp Tshrimp url to its picture in harddrive 7 10 2 Buffalo Chicken Bchik url to its picture in harddrive 8 3 4 Medim Fries Mfry url to its picture in harddrive Cateogry: Cat_id, Cat_description CAt_id CAt_desc 1 Main Meal 2 Appetizers 3 Salad 4 Sides Now, i want to make a view, where these Categories are displayed in tabs. On selection of a tab, related Pic, url and price are displayed from item table For example, If i select tab Main meal, only chicken meal and fish meal should be shown. If i select Salad tab, just ceasars and Green salad should show... Appreciate all the help!
Here are the steps you need to take:
Use your controller to prepare the data you want to display in a view. If you prefer, you can collect the data via a model. In your case, you need a join statement in the query builder, because you need to collect data from two (related) tables. Pass the data from the controller to the view. Now, in the view you'll have to divide the data into divs. Use css to visualize the divs as tabs, or use jQuery or jQueryUI to do that easily. Most css frameworks (like Bootstrap or Foundation) have classes to display divs as tabs too.
If you have the time, I would recommend testing the performance of making a separate query for each tab vs. making one query and splitting the data in PHP. I've seen instances where either one is faster than the other, depending primarily on the data in question. It's also possible that the performance of each option can change over time as data is added to the table(s).
Use Bootstrap Tabs - very easy. http://getbootstrap.com/javascript/#tabs
Thats a very basic example - keep in mind you can put anything you want inside the content area including tables. Also under the example they list out all the javascript - don't even worry about that just include the default bootstrap javascript file and it will work. also another thing you can use inside them to define the content is panels. that could be good for different menu sections. http://getbootstrap.com/components/#panels |
Welcome Guest, Not a member yet? Register Sign In |