Moved Zebra tables from main page to views page..hopefully!

2025-02-20 11:13:29 +08:00 · 2012-10-02 14:57:15 -07:00 · 2012-10-02 14:57:15 -07:00 · 5b1d29701b
commit 5b1d29701b
parent 692b50a0bc
1 changed files with 125 additions and 0 deletions
--- a/Zebra-Tables.md
+++ b/Zebra-Tables.md
@ -0,0 +1,125 @@
+[[Category:Views]]
+
+**Community:** Please feel free to add other methods :-)
+
+Zebra tables is a term used to describe tables that have alternating row colours:
+
+This effect can be achieved using various methods, both server and client-side using PHP and CSS/Javascript.
+
+### Basic method
+
+
+**CSS**
+
+```php
+
+.tr1 td{ background:#F4B624; color:#000; }
+.tr2 td{ background:#FFFFFF; color:#000; }
+
+```
+
+**View**
+
+Make sure the string helper is loaded. It contains a function called *alternator()*, which is exactly what we need here. This function allows two or more items to be alternated between when cycling through a loop.
+
+```php
+
+&lt;?php foreach ($result as $row) { ?&gt;
+
+<tr class="tr&lt;?php echo alternator('1', '2') ?&gt;">
+  <td>&lt;?php echo $row->name ?&gt;</td>
+  ...
+  <td>&lt;?php echo $row->descriptions ?&gt;</td>
+</tr>
+
+&lt;?php } ?&gt;
+
+```
+
+**Output**
+
+```php
+
+<tr class="tr1">
+  <td>Foo</td>
+  ...
+</tr>
+
+<tr class="tr2">
+  <td>Bar</td>
+  ...
+</tr>
+
+```
+
+### Table Class Method
+
+
+This method uses CodeIgniter's built-in table class library. First, build an array with the data for the table:
+
+```php
+
+$table_data=array(
+    array('Number in Stock','Item Name'),
+    array('34','Boxes'),
+    array('23','Pens'),
+    array('98','Sheets of Paper'),
+    array('12','Zebras')
+);
+```
+
+Then build an array with some table settings:
+
+```php
+
+$table_setup=array(
+    'table_open' => '<table class="zebraTable">',
+    'row_start' => '<tr class="rowOdd">',
+    'row_alt_start' => '<tr class="rowEven">'
+);
+```
+
+This sets an opening class for all your odd rows, and all your even rows, and cleans up the table opening tag. Only a class is really needed, if you're going for XHTML.
+
+Build the table into a variable to pass to your View:
+
+```php
+
+$this->table->set_template($table_settings); //apply the settings
+$data['table'] = $this->table->generate($this->foo->getFoo()); //build the html output and stick in our data array
+$this->load->view('tableview',$data);
+
+```
+
+Use the following (or similar!) styles in whichever stylesheet you wish to use:
+
+```php
+
+.zebraTable tr {
+    background-color:#FFFFFF;
+}
+.zebraTable .rowEven {
+    background-color:#DDDDDD;
+}
+```
+
+The resulting table html code is something similar to:
+
+```php
+<table class="zebraTable">
+<tr>
+<th>Number in Stock</th><th>Item Name</th></tr>
+<tr class="rowOdd">
+<td>34</td><td>Boxes</td></tr>
+<tr class="rowEven">
+<td>23</td><td>Pens</td></tr>
+
+<tr class="rowOdd">
+<td>98</td><td>Sheets of Paper</td></tr>
+<tr class="rowEven">
+<td>12</td><td>Zebras</td></tr>
+</table>
+```
+
+
+Good luck, and have fun!