CodeIgniter HTML table generator with custom layout inside - html

CI table->generate($data1, $data2, $data3) will output my data in a form of simple table like:
<table>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</table>
What if I need a complex cell layout with multiple $vars within each cell:
$data1 = array('one', 'two', 'three');
and I want something like this:
<table>
<tr>
<td>
<div class="caption">$data1[0]</div>
<span class="span1">$data1[1] and here goes <strong>$data1[2]</strong></span>
</td>
<td>...</td>
<td>...</td>
</tr>
</table>
How should I code that piece?
For now I just generate the content of td in a model and then call generate(). But this means that my HTML for the cell is in the model but I would like to keep it in views.

What I would suggest is have a view that you pass the data that Generates the td structure. Capture the output of the view and pass this to the table generator. This keeps your structure in the view albeit a different one.

Hailwood's answer isn't the best way to do it.
the html table class has a data element on the add_row method. so the code would be:
$row = array();
$row[] = array('data' => "<div class='caption'>{$data1[0]}</div><span class='span1'>{$data1[1]} and here goes <strong>{$data1[2]}</strong></span>");
$row[] = $col2;
$row[] = $col3;
$this->table->add_row($row)
echo $this->table->generate();
as an aside, having a class named caption in a table is semantically confusing because table has a caption tag.

Related

how to make table without contents in html?

i need to display no results in table like this:
But i got only this :
my table code is:
{this.state.listAllJobSeekers.length > 0 ?
<tbody>
{this.state.listAllJobSeekers.map((JobSeeker,indx)=>
<tr key={indx}>
<td></td>
<td></td>
</tr>
)}
</tbody> :
<tbody className="noResult">
<td>No Results Found</td>
</tbody>
}
if data appears it will show, but if there is no data i need to show table with no rows found
You would need to keep state of the loading state of your request.
As long as that request is loading you can use a different Array to be used to display the rows.
Something like this maybe:
{isLoading ?
new Array(10).fill("").map((item, index) => (
<tr key={index}>
<td></td>
<td></td>
</tr>
)):
this.state.listAllJobSeekers.map((item, index) => (
<tr key={index}>
<td></td>
<td></td>
</tr>))}
In order to always have a nice fixed height of the table, you would need to add empty rows to your listAllJobSeekers as long as there are less than 10 in there
The No rows found text can be placed within the table container with position: absolute; and then centered, relative to the table.
The empty table can be simulated with a set of empty data (in your case, 10 rows with empty cell data).

Unique Situation - Placing text next to other text without using CSS

I have a very unique situation that I am going to explain as best I can!
I want to output users in a style like so:
Username:Password
Username2:Password2
etc etc...
But I cannot place text in a paragraph like <p>Username:Password</p>
I can only do it like so... <p>Username:</p><p>Password</p>
And as I can only have seperate tags on the username and password the design ents up looking like so:
Username:
Password
I also cannot use any CSS whatsoever.
But I am able to use any type of HTML tags I like! (Span tags of course wouldn't work as they would both be separate still)
Is there any possible way to do this with the rules I have given you, I have tried everything!
(I know it sounds strange what I am wanting to do but I have a strange parser software that can only do this)
Here is a snippet of the code to show you how this works:
$ids = Array();
$usernames = Array();
$passwords = Array();
while ($row = $getaccounts->fetch_assoc()) {
$ids[] = $row["id"];
$usernames[] = "<span>".$row["username"].":</span>";
$passwords[] = "<span>".$row["password"]."</span><br />";
}
$activezero = implode(",",$ids);
$username = "".implode("",$usernames)."";
$password = "".implode("",$passwords)."";
echo $activezero;
I know this looks absolutely stupid, but trust me, this is the only way of getting my program to parse everything properly.
How can I make it output what I want using the code that I have?
There are some Options to solve this without using CSS, you could either use a table or a definition list, for example.
<table>
<thead>
<tr>
<th>Username</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice:</td>
<td>abc123</td>
</tr>
<tr>
<td>Bob:</td>
<td>pa$$word</td>
</tr>
</tbody>
</table>
<dl>
<dt>Alice:</dt>
<dd>abc123</dd>
<dt>Bob:</dt>
<dd>pa$$word</dd>
</dl>
Maybe sth like it?
<span>Username:</span><span>Password</span><br />
<span>Username2:</span><span>Password2</span>
Username:Password
Username2:Password2
jsfiddle

Header and data elements in same row using set_template in CodeIgniter

I am using the HTML Table Class of CodeIgniter, and attempting to create a table template. The example given in the documentation is the following:
$tmpl = array (
'table_open' => '<table border="0" cellpadding="4" cellspacing="0">',
'heading_row_start' => '<tr>',
'heading_row_end' => '</tr>',
'heading_cell_start' => '<th>',
'heading_cell_end' => '</th>',
'row_start' => '<tr>',
'row_end' => '</tr>',
'cell_start' => '<td>',
'cell_end' => '</td>',
'row_alt_start' => '<tr>',
'row_alt_end' => '</tr>',
'cell_alt_start' => '<td>',
'cell_alt_end' => '</td>',
'table_close' => '</table>'
);
$this->table->set_template($tmpl);
When I apply this template to my query, this is the resulting HTML:
<table data-hide-table="false" data-orientation="vertical" class="chart">
<thead>
<tr>
<th></th><th>Rate per SF</th></tr>
</thead>
<tbody>
<tr>
<td>2008</td><td>48</td></tr>
<tr>
<td>2009</td><td>32</td></tr>
<tr>
<td>2010</td><td>32</td></tr>
<tr>
<td>2011</td><td>32</td></tr>
<tr>
<td>2012</td><td>40</td></tr>
<tr>
<td>2013</td><td>41</td></tr>
</tbody>
</table>
The problem with this example is that each row contains two data elements (<td></td><td></td>), instead of one header element and one data element (<th></th><td></td>).
How can I change the template so that my resulting table will have one header element and one data element (<th></th><td></td>) on each row like this:
<table data-hide-table="false" data-orientation="vertical" class="chart">
<thead>
<tr>
<th></th><th>Rate per SF</th></tr>
</thead>
<tbody>
<tr>
<th>2008</th><td>48</td></tr>
<tr>
<th>2009</th><td>32</td></tr>
<tr>
<th>2010</th><td>32</td></tr>
<tr>
<th>2011</th><td>32</td></tr>
<tr>
<th>2012</th><td>40</td></tr>
<tr>
<th>2013</th><td>41</td></tr>
</tbody>
</table>
Thanks.
The answer is no you can't change template like this but yes you can somewhere achieve this kind of functionality
If you see the http://ellislab.com/codeigniter/user-guide/libraries/table.html there is a option to add a callable function so I suggest you are creating a table make some flag if you are using that table is generating than create a helper function and add that to the table function than before generating table set a flag to determine the first cell may be using cookie. Than from helper for every 1, 3....(2n+1) add some custom html tag or style. Than after generating the table remove all the flags.

Is there a better way to get this element/node with Nokogiri?

I think the best way to explain this is via some code. Basically the only way to identify the TR I need inside the table (i've already reached the table itself and named it annual_income_statement) is by the text of the first TD in the TR, like this:
this may be helpful to know, too:
actual html:
doc = Nokogiri::HTML(open('https://www.google.com/finance?q=NYSE%3AAA&fstype=iii'))
html snippet:
<div id="incannualdiv">
<table id="fs-table">
<tbody>
<tr>..</tr>
...
<tr>
<td>Net Income</td>
<td>100</td>
</tr>
<tr>..</tr>
</tbody>
</table>
</div>
original xpath
irb(main):161:0> annual_income_statement = doc.xpath("//div[#id='incannualdiv']/table[#id='fs-table']/tbody")
irb(main):121:0> a = nil
=> nil
irb(main):122:0> annual_income_statement.children.each { |e| if e.text.include? "Net Income" and e.text.exclude? "Ex"
irb(main):123:2> a = e.text
irb(main):124:2> end }
=> 0
irb(main):125:0> a
=> "Net Income\n\n191.00\n611.00\n254.00\n-1,151.00\n"
irb(main):127:0> a.split "\n"
=> ["Net Income", "", "191.00", "611.00", "254.00", "-1,151.00"]
but is there a better way?
more details:
doc = Nokogiri::HTML(open('https://www.google.com/finance?q=NYSE%3AAA&fstype=iii'))
div = doc.at "div[#id='incannualdiv']" #div containing the table i want
table = div.at 'table' #table containing tbody i want
tbody = table.at 'tbody' #tbody containing tr's I want
trs = tbody.at 'tr' #SHOULD be all tr's of that table/tbody - but it's only the first TR?
I expect that last bit to give me ALL the TR's (which would include the TD i'm looking for)
but in fact it only gives me the first TR
Best is probably:
table.at 'tr:has(td[1][text()="Net Income"])'
Edit
More info:
doc = Nokogiri::HTML <<EOF
<div id="incannualdiv">
<table id="fs-table">
<tbody>
<tr>..</tr>
...
<tr>
<td>Net Income</td>
<td>100</td>
</tr>
<tr>..</tr>
</tbody>
</table>
</div>
EOF
table = doc.at 'table'
table.at('tr:has(td[1][text()="Net Income"])').to_s
#=> "<tr>\n<td>Net Income</td>\n <td>100</td>\n </tr>\n"

Read td values using prototype

I would like to read the values of HTML td using prototype. For example, say you have a table as follows
<table id="myTable">
<tr>
<td>apple</td>
<td>orange</td>
</tr>
<tr>
<td>car</td>
<td>bus</td>
</tr>
</table>
I would like to read the values - apple, orange, car and bus alone. I am unable to find a
way to do it? Any help would be of great help.
Thanks,
J
This should work:
var values = $$('#myTable td').collect(function(element) {
// stripTags(), if you're only interested in the actual content
return element.innerHTML.stripTags();
});
The following returns an array of strings.
$$('#myTable td').pluck('innerHTML');