I have a table with header on it. I need the header to be fixed when the user scrolls the table data.
my table is as follows
<div style="height: 300px;overflow: auto">
<table>
<thead>
<tr>
<th> Nr. </th>
<th> Name </th>
<th> Status </th>
<th> Date </th>
</tr>
</thead>
<tbody>
<tr>
<?php while($record = odbc_fetch_array($result)) { ?>
<td> <?php echo$record['Nr']; ?></td>
<td> <?php echo$record['Name']; ?></td>
<td> <?php echo$record['Status']; ?></td>
<td> <?php echo$record['Date']; ?></td>
<?php }?>
</tr>
</tbody>
</table>
</div>
Let me know if you need more information.
your syntax is wrong.
this will not work.
you have to put the table head inside section. not .
then you can define overflow: auto and a fixed height to tbody and you will be able to scroll inside the table.
<table>
<thead>
... heading
</thead>
<tbody style="height: 100px; display: block; overflow: auto; ">
... bodycols
</tbody>
</table>
something like that, but pleas s dont do this.
its very unreliable.
please do two seperate tables, wrap them inside a div and make one div fixed height and overflow auto. two more links:
http://www.cssplay.co.uk/menu/tablescroll.html
http://www.imaputz.com/cssStuff/bigFourVersion.html
To begin, your code is wrong.
The Tr with th's must be wrapped with a thead, the other ones by a tbody.
Then, you should watch the source code of this page
If you set a fixed height on the table, if it doesn't have content or very few rows, they will expand to be very high and fill the space. I don't know if that's what you want.
This solution might work for you depending on the style of your headers.
http://salzerdesign.com/blog/?p=191
Related
I have a datatable in HTML which i am populating with dynamic data from PHP. each row is expandable but what I want is to have child rows for each parent row. So, for example there is a device type with the number 4 which contains 20 different devices, so I want to display in the parent row Device number 4 and when I expand that row display the 20 devices (with headers such as IMEI, Serial no., etc.)
Here is the table I have right now:
See screenshot of my table
EDIT: Added current table (no child rows)
<table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
<thead>
<th>Device</th>
<th>Dev.no</th>
<th>Barcode</th>
<th>IMEI</th>
<th>Serial no.</th>
<th>Date added on stock</th>
</thead>
<tbody>
<?php if (!empty($devices)) { ?>
<?php foreach ($devices as $device) : ?>
<tr>
<td>
<?php echo $device["name"] ?>
</td>
<td>
<?php echo $device["device_no"] ?>
</td>
<td>
<?php echo $device["barcode"] ?>
</td>
<td>
<?php echo $device["serial_imei"] ?>
</td>
<td>
<?php echo $device["serial_no"] ?>
</td>
<td>
<?php echo $device["created_date"] ?>
</td>
</tr>
<?php endforeach; ?>
<?php } ?>
</br>
</tbody>
</table>
I think you're looking for something like this https://datatables.net/reference/api/row().child().
Then you can add a table in the child row with more information.
Note: It looks like you have the responsive option enabled (green plus button that hides/shows hidden columns). If you have a child row open and try to show the hidden columns, it might overwrite your child row.
Edit:
You need to specify the HTML you want to put in the child. I would personally use ajax to retrieve the children when I wanted to display them. Otherwise the data needs to be hidden somewhere in the page.
I've created a codepen that puts the HTML in a data attribute on the row. Then you can click a button to view the child rows (devices). Obviously, there are many other ways to store the data on the page.
$(document).on("click", ".viewChildren", rowClickHandler);
$("#example").DataTable();
function rowClickHandler() {
var btn = $(this);
var tr = btn.closest('tr');
var dtRow = $("#example").DataTable().row(tr);
if (dtRow.child.isShown()) {
dtRow.child.hide();
btn.text('Show Children');
} else {
var children = tr.data("children");
dtRow.child(children).show();
btn.text('Hide Children');
}
}
th{
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Device</th>
<th>Dev.no</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr data-children='<table>
<thead>
<tr>
<th>barcode</th>
<th>imei</th>
<th>serial_no</th>
<th>created_date</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456</td>
<td>11324</td>
<td>654654</td>
<td>2020-01-17</td>
</tr>
<tr>
<td>1234987</td>
<td>1654</td>
<td>654687</td>
<td>2020-04-30</td>
</tr>
</tbody>
</table>'>
<td>Laptop</td>
<td>2</td>
<td><button class = 'viewChildren'>See Children</button></td>
</tr>
</tbody>
</table>
I have a page that displays about 12 tables that are filled from database values. These values correspond with a single record but some of these fields are based off of queries I'm making so that if something's wrong in the query, it will display red text.
I'm only doing this for a few different fields but I want an option to edit and fix those fields and then save them to the database with an UPDATE.
Basically, I don't want to wrap the whole page in a form since only a few fields in a few of the tables will need to be editable. Is there a way to do this so that I can edit only the few fields that need to be fixed?
Here's a table as example:
<div class="testResults" style=" width: 30%; clear:both; float: left;">
<!--Test Results Table-->
<table style="width: 100%;">
<tr>
<th colspan="2">Test Results</th>
</tr>
<tr>
<td style="text-align: left;">Tested Within AWWA Standards</td>
<td><? echo $row['standards'];?> </td>
</tr>
<tr>
<td style="text-align: left;">Meter Failed on Low Side</td>
<td><? echo $row['lowFail'];?> </td>
</tr>
<tr>
<td style="text-align: left;">Meter Failed on High Side</td>
<td><? echo $row['highFail'];?> </td>
</tr>
<tr>
<td style="text-align: left;">Meter Failed Low and High Side</td>
<td><? echo $row['bothFail'];?> </td>
</tr>
<tr>
<td style="text-align: left;">Unable To Test</td>
<td><? echo $row['unableTest'];?> </td>
</tr>
</table>
So, for example, say I want to edit the data for just standards row and lowFail row.
I know once this is done I'll need to have a submit button that attaches to a query to update with the input name, but right NOw i'm trying to find the best way to edit.
Is it easiest to just wrap the whole page in a form and just create the few inputs where I need?
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.
i have to show 3 columns in List view.
I tried having table inside <li><table></table></li> but its not looking good.
Is there any way to show 3 columns in list view.?
I tried ui-grid-b for 3 columns. but CSS issues...jsfiddle.net/9ZBAS/1
I tried and i could see columns overlapping if i use href and working find if not using href but without href i couldnt get the next icon button.
Any help?
try this one
<li >
<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
</div>
</li>
check this link;;
http://jquerymobile.com/test/docs/content/content-grids.html
Edited
Check this one
http://jsfiddle.net/9ZBAS/47/
Alternative to the Grid layout, using tables. This is not well documented in jQM
http://jquerymobile.com/demos/1.1.0/docs/content/content-html.html
HTML:
<table summary="This table lists all the JetBlue flights.">
<caption>
Travel Itinerary
</caption>
<thead>
<tr>
<th scope="col">Flight:</th>
<th scope="col">From:</th>
<th scope="col">To:</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">Total: 3 flights</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">JetBlue 983</th>
<td>Boston (BOS)</td>
<td>New York (JFK)</td>
</tr>
<tr>
<th scope="row">JetBlue 354</th>
<td>San Francisco (SFO)</td>
<td>Los Angeles (LAX)</td>
</tr>
<tr>
<th scope="row">JetBlue 465</th>
<td>New York (JFK)</td>
<td>Portland (PDX)</td>
</tr>
</tbody>
</table>
CSS:
<style type="text/css">
table { width:100%; }
table caption { text-align:left; }
table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
table th, td { text-align:left; padding:6px;}
</style>
View:
Related:
JQuery Mobile Table
If I have these two tables:
<table>
<tr>
<td>Small Length Content</td>
</tr>
</table>
<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
How can I make it so that the two columns have the same width?
I can't combine the tables so thats not an option. I also can't use fixed widths since its dynamic content. Any ideas? Perhaps something in javascript to have the top columns match the width of the lower table? I'm no js expert so I have no idea if thats possible or how to do it. Php is an option on the table as well if theres a way to use that to solve it as well.
Are you able to define css for this dynamic content? Suppose these tables were nested inside a div like so:
<div id="content">
<table>
<tr>
<td>Small Length Content</td>
</tr>
</table>
<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
</div>
I would write some css like this:
#content table td { width: 80%; }
I would use a percentage-based width on the 'flowing' column, and buffer it with fixed-width columns if necessary. ie.:
<table style="width: 100%;">
<tr>
<td style="width: 80%;">Small Length Content</td>
</tr>
</table>
<table style="width: 100%;">
<tr>
<td style="width: 80%;">Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
You can use CSS to accomplish this. You will have to have the longer content wrap.
td{
width:80%;
}
Try
<table>
<tr>
<td style="width:200px">Small Length Content</td>
</tr>
</table>
<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
or add a class to name to the td element and define the style somewhere else like an external file or in header style