How to set thead in vertical in datatable? - php

I have used jquery datatable,
HTML Code
<table id="result_table" class="display table table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>#</th>
<th>Username</th>
<th>Activation Status</th>
<th>Recent Login</th>
<th>Total No. of login</th>
<th>Avg No. of login/day</th>
<th>Total No. of Exports</th>
<th>Total No. of access</th>
</tr>
</thead>
<tfoot>
<tr>
<th>#</th>
<th>Username</th>
<th>Activation Status</th>
<th>Recent Login</th>
<th>Total No. of login</th>
<th>Avg No. of login/day</th>
<th>Total No. of Exports</th>
<th>Total No. of access</th>
</tr>
</tfoot>
</table>
and I have to load the table data in ajax call in JSON datatype here my PHP code
while($row = mysql_fetch_array($run_query)){
$name = $row['first_name'];
$name_string = "<a edit_id='name_".trim($name)."' href='#' onClick=\"click_today('{$name}');\" data-toggle='modal' data-target='#myModal'>{$name}</a>";
//onClick=\"click_today('{$name}');\"
$result_array[] = array($row['id'], $name_string, $row['last_name'], $row['job_title'], $row['salary'],"-","-","-");
}
echo json_encode($result_array);
acutually my result is (sample output)
but i want following image output in datatable
I don't know how to implement vertical header in jquery data table I am always using horizontal thead but now I need vertical header because of needed pls share ur suggestion or solution

It is possible to make this kind of output from server side[php] only then
to assign datatable. I had also face this problem but I make way from server side
and another way is also there you change your expected format using PIVOT Table
using database

Related

I am sorting data on database but webpage doesn't take effect

I tried to sort/order data on database. I used this command:
SELECT * FROM `estates`
ORDER BY `estates`.`price` ASC
It take effect on database order. But on webpage it doesn't. How can I make it take effect on webpage too? Any idea? Thank you.
By the way I am using Laravel,
and retriving data from database with MVC
If you need to check to my page structure here it is:
<table cellspacing='0'> <!-- cellspacing='0' is important, must stay -->
<thead>
<tr>
<th width="150px">会社名</th>
<th width="150px">物件名</th>
<th width="250px">住所</th>
<th width="150px">販売価格</th>
<th width="100px">総戸数</th>
<th width="150px">専有面積</th>
<th width="100px">間取り</th>
<th width="100px">バルコニー面積</th>
<th width="100px">竣工時期</th>
<th width="100px">入居時期</th>
</tr>
<thead>
<tbody>
#foreach($estates as $estate)
<tr class="even">
<td>{{$estate->company_name}}</td>
<td>{{$estate->name}}<br/></td>
<td>{{$estate->address}}</td>
<td>{{$estate->price}}</td>
<td>{{$estate->hows_old}}</td>
<td>{{$estate->extend}}</td>
<td>{{$estate->rooms}}</td>
<td>{{$estate->balcon_m2}}</td>
<td>{{$estate->old}}</td>
<td>{{$estate->entery}}</td>
</tr>
#endforeach
</tbody>
</table>
And here is the controller:
public function sumos()
{
$estates = Estates::get();
//test
$data['estates'] = $estates;
return view('welcome', $data);
}
try to use orderBy
Estates::orderBy('price')->get();

Datatable Column Exceeds

I got a huge dataset with around 39 columns. Now the datatable exceeds the display area of the browser.
No problem with rows is they are listed based on pagination. Is there any wrapping property to datatables? I want to display all columns in the same browser space
My datatable columns are
<table id='datatable' class="ui celled table" style='width:100%'>
<thead>
<tr>
<th>DeviceID</th>
<th>AppID</th>
<th>IsFingerprint</th>
<th>CurrentDate</th>
<th>IsSDCard</th>
<th>NetworkType</th>
<th>TotalRAM</th>
<th>AvailInternal</th>
<th>AvailExternal</th>
<th>TotalInternal</th>
<th>TotalExternal</th>
<th>Activity</th>
<th>Package</th>
<th>AppStore</th>
<th>AppName</th>
<th>AppVersion</th>
<th>AppVersionCode</th>
<th>BatteryCharge</th>
<th>IsCharging</th>
<th>Manufacturer</th>
<th>Model</th>
<th>OSCodename</th>
<th>OSVersion</th>
<th>Product</th>
<th>Device</th>
<th>Board</th>
<th>Hardware</th>
<th>Rooted</th>
<th>Brand</th>
<th>Host</th>
<th>Time</th>
<th>User</th>
<th>ScreenResolution</th>
<th>ScreenDensity</th>
<th>ScreenSize</th>
<th>Country</th>
<th>Carrier</th>
<th>ActiveTraffic</th>
<th>AppUsage</th>
<th>Image</th>
</tr>
</thead>
<tfoot>
<tr>
<th>DeviceID</th>
<th>AppID</th>
<th>IsFingerprint</th>
<th>CurrentDate</th>
<th>IsSDCard</th>
<th>NetworkType</th>
<th>TotalRAM</th>
<th>AvailInternal</th>
<th>AvailExternal</th>
<th>TotalInternal</th>
<th>TotalExternal</th>
<th>Activity</th>
<th>Package</th>
<th>AppStore</th>
<th>AppName</th>
<th>AppVersion</th>
<th>AppVersionCode</th>
<th>BatteryCharge</th>
<th>IsCharging</th>
<th>Manufacturer</th>
<th>Model</th>
<th>OSCodename</th>
<th>OSVersion</th>
<th>Product</th>
<th>Device</th>
<th>Board</th>
<th>Hardware</th>
<th>Rooted</th>
<th>Brand</th>
<th>Host</th>
<th>Time</th>
<th>User</th>
<th>ScreenResolution</th>
<th>ScreenDensity</th>
<th>ScreenSize</th>
<th>Country</th>
<th>Carrier</th>
<th>ActiveTraffic</th>
<th>AppUsage</th>
<th>Image</th>
</tr>
</tfoot>
</table>
I use AJAX to load data from my PHP API endpoint and it works fine.
Is there any way to merge cells like AppName, AppPackage, AppVersion, AppVersionCode comes under App cell

bootstrap table data url populate with php

I have a bottstrap html table:
<table data-toggle="table" data-url="../../scripts/tags/s_displaytags.php" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="TagName" data-sort-order="desc">
<thead>
<tr>
<th data-field="SerialNumber" data-sortable="true">Serial #</th>
<th data-field="TagName" data-sortable="true">Tag Name</th>
<th data-field="CreatedBy" data-sortable="true">Created By</th>
</tr>
</thead>
</table>
I'm trying to populate it using a PHP script s_displaytags.php. Currently im testing it so the code is:
<?PHP
$ArrayValue = array();
$ArrayValue['SerialNumber'] = 1;
$ArrayValue['TagName'] = 'test';
$ArrayValue['CreatedBy'] = 50;
echo json_encode($ArrayValue);
?>
My HTML page loads but the table values do not get loaded.
I'm not using any functions at the moment. It's just a plain PHP file returning one result row encoded s JSON.
so i just changed echo json_encode($ArrayValue); to echo json_encode(array($ArrayValue)); and it worked.

Hiding Table Column in Bootstrap Table

I created a table and used collapsed visibility to try to hide many columns from being shown. The columns still show, just they show up blank. I want it to show as though those columns don't exist. The reason the are there is there is a search box that searches through the table data. I want it to search those items but not display them.
<table id='example1' class='table table-bordered table-striped'>
<thead>
<tr>
<th>Ticket #</th>
<th>Date</th>
<th>Subject</th>
<th>Status</th>
<th>Close Date</th>
<th>Assigned To</th>
<th>Work Order</th>
<th style='visibility:collapse;'>TID #</th>
<th style='visibility:collapse;'>Modem #</th>
<th style='visibility:collapse;'>MHL #</th>
<th style='visibility:collapse;'>Waybill #</th>
<th style='visibility:collapse;'>TID #</th>
<th style='visibility:collapse;'>ATM Brand</th>
<th style='visibility:collapse;'>ATM Model</th>
<th style='visibility:collapse;'>EPP Serial</th>
<th style='visibility:collapse;'>Router #</th>
</tr>
</thead>
<tbody>"; // output data of each row
while($row = $result->fetch_assoc()) { $href='"#"'; echo "
<tr>
<td><a href='tickets.php?id=".$row[' id ']."'>".$row['id']."</a>
</td>
<td>".$row['timecreated']."</td>
<td>".$row['subject']."</td>
<td>".$row['status']."</td>
<td>".$row['closedate']."</td>
<td>".$row['assignedtoname']."</td>
<td>".$row['workorder']."</td>
<td style='visibility:collapse;'></td>
<td style='visibility:collapse;'></td>
<td style='visibility:collapse;'></td>
<td style='visibility:collapse;'></td>
<td style='visibility:collapse;'></td>
<td style='visibility:collapse;'></td>
<td style='visibility:collapse;'></td>
<td style='visibility:collapse;'></td>
<td style='visibility:collapse;'></td>
</tr>"; } } else { echo "0 results"; } echo "</tbody>
<tfoot>
<tr>
<th>Ticket #</th>
<th>Date</th>
<th>Subject</th>
<th>Status</th>
<th>Close Date</th>
<th>Assigned To</th>
<th>Work Order</th>
<th style='visibility:collapse;'>TID #</th>
<th style='visibility:collapse;'>Modem #</th>
<th style='visibility:collapse;'>MHL #</th>
<th style='visibility:collapse;'>Waybill #</th>
<th style='visibility:collapse;'>TID #</th>
<th style='visibility:collapse;'>ATM Brand</th>
<th style='visibility:collapse;'>ATM Model</th>
<th style='visibility:collapse;'>EPP Serial</th>
<th style='visibility:collapse;'>Router #</th>
</tr>
</tfoot>
</table>
Change "visibility:collapse;" to "display: none;"
As per https://developer.mozilla.org/en-US/docs/Web/CSS/visibility, it seems as if you'll have to use display none, instead.
collapse For table rows, columns, column groups, and row groups the
row(s) or column(s) are hidden and the space they would have occupied
is removed (as if display: none were applied to the column/row of the
table). However, the size of other rows and columns is still
calculated as though the cells in the collapsed row(s) or column(s)
are present. This was designed for fast removal of a row/column from a
table without having to recalculate widths and heights for every
portion of the table. For XUL elements, the computed size of the
element is always zero, regardless of other styles that would normally
affect the size, although margins still take effect. For other
elements, collapse is treated the same as hidden.

How can I add a link to a table in Smarty?

I have a requirement to output a table using Smarty and then have the user select a row to take them to another page.
I can display the table fine:
{html_table cols="Job Title,Salary,Sector,Location" loop=$results}
which gives:
<table border="1">
<thead>
<tr>
<th>Job Title</th>
<th>Salary</th>
<th>Sector</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dog walker</td>
<td>20000</td>
<td>None</td>
<td>London</td>
</tr>
<tr>
<td>F1 Driver</td>
<td>10000000</td>
<td>Financial Services</td>
<td>Scotland</td>
</tr>
</tbody>
</table>
but I am not sure if it is possible to add a hyperlink as an additional column to the table that links to a page using a hidden id.
So I would want something link this:
<table border="1">
<thead>
<tr>
<th>Job Title</th>
<th>Salary</th>
<th>Sector</th>
<th>Location</th>
<th>Apply</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dog walker</td>
<td>20000</td>
<td>None</td>
<td>London</td>
<td>Apply</td>
</tr>
<tr>
<td>F1 Driver</td>
<td>10000000</td>
<td>Financial Services</td>
<td>Scotland</td>
<td>Apply</td>
</tr>
</tbody>
</table>
Is that possible?
Yes, but you need to modify the $results array before you pass it to Smarty so that the 4th element of each row contains the link as a string. There's no way to have {html_table} generate the link for you.

Categories