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
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 hava a simple table, every tr is a link with a sepcific order, but I have to have one extra column n th with checking or this order is already in store. ( with checboxes ) I can't to this because when I add this, then all row i a link, but I want to this last column wasn't a link, but simple checboxes.
Here is my code:
<table class="table">
<tr>
<th>Order Number</th>
<th>Name</th>
<th>Tel</th>
<th>Email</th>
<th>Status</th>
<th>Order date</th>
<th>IS in store?</th>
</tr>
<router-link :to="'/orderDetail/'+order.id" tag="tr" v-for="order in orders" :key="order.number"
class="order-row">
<td>{{order.number}}</td>
<td>{{order.client_name}}</td>
<td>{{order.phone}}</td>
<td>{{order.email}}</td>
<td>{{order.actual_status}}</td>
<td>{{order.order_date}}</td>
<td>Here should be checbox with id of roder, but not as a link</td>
</router-link>
</table>
html css :
.order-row:hover td {
cursor: pointer;
transition-duration: 0.3s;
background-color: #EfEEEE;
border-top: 1px solid #e0093e;
border-bottom: 1px solid #e0093e;
color: #e0093e;
}
First create one method, something like this
orderRedirect: function(order) {
this.$router.replace('/orderDetail/' + order.id); // For Vuejs 2
this.$route.router.go('/orderDetail/' + order.id); //For Vuejs 1
},
Then call this function on click from table td, something like this
<table class="table">
<tr>
<th>Order Number</th>
<th>Name</th>
<th>Tel</th>
<th>Email</th>
<th>Status</th>
<th>Order date</th>
<th>IS in store?</th>
</tr>
<tr v-for="order in orders" class="order-row">
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.number}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.client_name}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.phone}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.email}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.actual_status}}</td>
<td #click="orderRedirect(order)" style="cursor: pointer">{{order.order_date}}</td>
<td><input type="checkbox"></td>
</tr>
</table>
This is one of way that you can remove link from checkbox td
Try something along the lines of:
<td><input type="checkbox" v-model="order.actual_status"></td>
I am able to get the coding of a website with file_get_contents but I want to be able to get certain values out of the html. This piece of code is always the same but the value between the html tag changes from time to time. This is the HTML Code:
<div class="cheapest-bins">
<h3>Cheapest Live Buy Now</h3>
<table>
<tbody><tr>
<th>Console</th>
<th>Buy Now Price</th>
</tr>
<tr class=" active">
<td class="xb1">XB1</td>
<td>1,480,000</td>
</tr>
<tr class="">
<td class="ps4">PS4</td>
<td>1,590,000</td>
</tr>
<tr class="">
<td class="x360">360</td>
<td>---</td>
</tr>
<tr class="">
<td class="ps3">PS3</td>
<td>2,800,000</td>
</tr>
</tbody></table>
</div>
How would I go about getting the: 1,480,000 .. 1,590,000 .. --- and 2,800,000?
short answer:
find a css selector library such as https://github.com/tj/php-selector
then you could grab all td:last-child elements/innerhtml
for your specific example you could just just
preg_match_all('#<td>(.*?)</td>#', $html, $matches);
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
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