How can I add a class to particular row in codeigniter using table class?
You can't add a class to a row in the same way you can added extra attributes to other elements CI-style. You can, however, add a class to every td IN A ROW, and then operate on the class as it references the entire row:
$td1 = array(
'data' => '/*actual html you want in the td*/',
'class' => 'myclass'
);
$table->add_row($td1);
It's annoying to have to do every single td like that, and it isn't really what you want to have to do, but it's the best out there from all the solutions that I've seen.
I would stay away from the CI table class if i were you; it is overly messy and doesnt really make things any easier or save you work.
I prefer this:
<table cellspacing="0" cellpadding="4">
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<?php if($table_data != FALSE){?>
<?php foreach($table_data->result() as $row){?>
<tr <?php echo (expr to find the row)? 'class="your_class"' : ''; ?>>
<td></td>
<td></td>
<td></td>
</tr>
<?php }?>
<?php }?>
</table>
Related
I'm trying to achieve a table with expandable rows.
This is the code i have so far.
<table id="something" class="table table-responsive table-condensed table-striped">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php
foreach ($info as $var) {
?>
<tr data-toggle="collapse" data-target="#accordion<?php echo $var['id'] ?>" class="clickable">
<td><h4><?php echo $name ?> </h4></td>
<td class="<?php echo $colors[array_rand($colors)] ?>">Status</td>
</tr>
<tr>
<td colspan="2">
<div id="accordion<?php echo $var['id'] ?>" class = "collapse">
</div>
</td>
</tr>
<?php
}
?>
</tbody>
The table loads without any problem.
My goal is to sort either by Status or Name, and use a few more options of DataTables.
As soon as I load DataTables I get the following error: Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
Any idea what can be causing this?
Thanks in advance.
I had this same thing and none of the ideas above fixed it for me. This one was a bit of head scratcher until I got it figured out.
My table has only two columns and I'm using a <tr><td colspan="2"><td></tr> from time to time. The table is syntactically correct. I'm using the colspans to separate logical sections of data.
The error comes from the fact that I'm using HTML5 data attributes on the <td> tags. Specifically the data-order attribute. In this case Datatabes does not support colspans on <td> tags.
To get this to work properly for me I replaced the <td colspan="2"> tag with two <td> tags that included the data-order attributes. I used the same attribute value for the row coming next so that the order doesn't get wonky when the order is changed.
Hope that helps someone!
I don't know why yet, but it seems to be related to the "table-stiped" class. Solution, right after your javascript code to "convert" your table to a DataTable you can add the class "table-striped" and that will work, like this:
$('#something').addClass("table-striped");
So, I am just testing out the Google material design. In the table component, it can select multiple rows.
I also have following function which deletes individual row (or the data that it contains)
<a onclick="return confirm('Are you sure?');" href="<?php echo wp_nonce_url( add_query_arg( array( 'action' => 'my-delete-product', 'product_id' => $post->ID ), my_get_navigation_url('products') ), 'my-delete-product' ); ?>"><i class="material-icons">delete</i></a>
Now, once the multiple rows are selected, I am not sure how to apply this delete function to the selected rows.
Here is what I have so far in terms of the design: (http://www.getmdl.io/components/index.html#tables-section)
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
I can have a button outside of this table. However I am not sure how to "link" the selected rows to the "delete" function itself. I am guessing I need to use jQuery or something.
Anyway, any suggestions will be appreciated.
Thanks!
No you dont. You just need to keep track the selected rows and then do the action when clicki g on delete.
There is an easier way, use a componenf which has a support for exactly what you need: https://github.com/iamisti/mdDataTable
what would be the proper implementation of displaying an empty/blank table or just the table header if query result is empty?
**note/conditions
no page redirection
no creation of two tables, one for query with empty result and one for query with results
or is there a much, much better way to do this?
here is a sample code:
<?php if(isset($result)){ ?>
<table>
<tr>
<td>Name</td>
<td>Email</td>
</tr>
<?php foreach($result as $key => $data){?>
<tr>
<td><?php echo $data['name'];?></td>
<td><?php echo $data['email_add'];?></td>
</tr>
<?php }?>
</table>
<?php } ?>
the problem here is that it still throws an error on foreach loop.
When the query result returns false return an empty array instead
I hope this help , and ready for more help if needed
About the exception:
You check if $results is set, but then you try to loop over $result (without a trailing s). I believe you have a typo, which might be a part of the problem. Fixing the typo and making sure that the result is not empty (it might be set, but still empty) will probably fix the exception being thrown.
About always showing the header:
To display the header no matter what, move the if-statement to just before the the loop.
FYI - About well formatted HTML-tables:
To declare a header on a table, you usually make use of the <thead> element - to separate it from the content of the table. An example of a well-formatted HTML-table:
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>john#email.com</td>
</tr>
</tbody>
</table>
More on formatting tables
In your case, I would put the loop around the <tr> element within the <tbody>.
<?php if(isset($result) && !empty($result)): ?>
<table>
<tr>
<td>Name</td>
<td>Email</td>
</tr>
<?php foreach($result as $data): ?>
<tr>
<td><?php echo $data['name'];?></td>
<td><?php echo $data['email_add'];?></td>
</tr>
<?php endforeach ?>
</table>
<?php else: ?>
No results found.
<?php endif ?>
Note that I prefer to use the long-form of statements for PHP templates, as it greatly improves readability.
I am getting an php notice when using simple html dom to scrape a website. There are 2 notices displayed and everything rendered underneath looks perfect when using the print_r function to display it.
The website table structure is as follows:
<table class=data schedTbl>
<thead>
<tr>
<th>DATA</th>
<th>DATA</th>
<th>DATA</th>
etc....
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="class1">DATA</div>
<div class="class2">SAME DATA AS PREVIOUS DIV</div>
</td>
<td>DATA</td>
<td>DATA</td>
etc....
</tr>
<tr>
<td>
<div class="class1">DATA</div>
<div class="class2">SAME DATA AS PREVIOUS DIV</div>
</td>
<td>DATA</td>
<td>DATA</td>
etc....
</tr>
<tr>
<td>
<div class="class1">DATA</div>
<div class="class2">SAME DATA AS PREVIOUS DIV</div>
</td>
<td>DATA</td>
<td>DATA</td>
etc....
</tr>
etc....
</tbody>
</table>
The code below is used to find all tr in table[class=data schedTbl]. I have a tbody selector in there, but it seems to pay no attention to this selector as it still selects the tr in the thead.
include('simple_html_dom.php');
$articles = array();
getArticles('www.somesite.com');
function getArticles($page) {
global $articles;
$html = new simple_html_dom();
$html->load_file($page);
$items = $html->find('table[class=data schedTbl] tbody tr');
foreach($items as $post) {
$articles[] = array($post->children(0)->first_child(0)->plaintext,//0 -- GAME DATE
$post->children(1)->plaintext,//1 -- AWAY TEAM
$post->children(2)->plaintext);//2 -- HOME TEAM
}
}
So, I believe notices come from the tr in the thead because I am calling on the first child of the first td which only has one record. The reason for two is there is actually two tables with the same data structure in the body.
Again, I believe there are 2 ways of solving this:
1) PROBABLY THE EASIEST (fix the find selector so the TBODY works and only selects the tds within the tbodies)
2) Figure out a way to not do the first_child filter when it is not needed?
Please let me know if you would like a snapshot of the print_r($articles) output I am receiving.
Thanks in advance for any help provided!
Sincerely,
Bill C.
Just comment out line #695 in the simple_html_dom.php
if ($m[1]==='tbody') continue;
Then it should read the tbody.
How can I get the class of the table when clicking the tr?
This is my code
<table class='table1' border='1'>
<tr class='graph1'>
<td>Test1</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
<tr class='graph2'>
<td>Test2</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
<tr class='graph3'>
<td>Test3</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
</table>
<table class='table2' border='1'>
<tr class='graph1-1'>
<td>Test1</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
<tr class='graph2-1'>
<td>Test2</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
<tr class='graph3-1'>
<td>Test3</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
</table>
When I click on
<tr class='graph2'>
<td>Test2</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
It should display 'table1'
or if I click on
<tr class='graph3-1'>
<td>Test3</td>
<td><a class='viewHistory'>View History<a></td>
</tr>
It should display: 'table2'
Take not that this is dynamic, its not only graph2 or graph3-1 will be clicked.
how would I do that using jquery?
Any help would be greatly appreciated and rewarded! Thanks!
I would use closest() to find the table parent. See also http://api.jquery.com/closest/
$('.viewHistory').click(function() {
var classname = $(this). closest('table').attr('class');
alert(classname);
}
jQuery('table tr').click(function(){
//this is set to the row's DOM element
jQuery(this).parent('table').attr('class');
});
See the jQuery.parent for details.
Never used it personally so not sure about this, but jQuery.closest may give better performance compared to jQuery.parent.
Also, please note that the following code sample will attach click event for any table row in the document, so you'd better add some specific class to your tables (say clickable_table and use it like this)
jQuery('.clickable_table tr').click(function(){
//this is set to the row's DOM element
jQuery(this).parent('table').attr('class');
});
You can use the .parent() function (if you want to click the a tag, use it twice)
and the .attr("class") to get the class. I think there is also a .class or something but not sure right now.