Datatable Column Exceeds - php

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

Related

Looping through json laravel

I have a table in which a column stores json data,but I am unable to loop through it in the view.
Sample Data :
[
{
"id":28,
"item_id":4,
"item_name":"Texco Dx",
"rate":"15.00",
"unit":"box",
"qty":"20",
"price":300,
"tax":12,
"taxType":"GST",
"tax_paid":36,
"disc":0,
"value":336,
"barcode":"1234ergeg",
"hsn":"q23423",
"lot_number":"1235r23r",
"checked":true,
"error":false,
"returnedQty":12,
"returnedValue":33.6,
"returnedTax":3.6,
"allowedQty":10
},
{
"id":27,
"item_id":3,
"item_name":"Norflox Tz",
"rate":"124.00",
"unit":"qty",
"qty":"10",
"price":1240,
"tax":10,
"taxType":"GST",
"tax_paid":124,
"disc":0,
"value":1364,
"barcode":"11121231",
"hsn":"123213",
"lot_number":"123",
"checked":true,
"error":false,
"returnedQty":3,
"returnedValue":272.8,
"returnedTax":24.8,
"allowedQty":9
}
]
This is how I am trying to loop through it :
<table>
<tr class="left">
<th>SR NO</th>
<th>ITEM NAME</th>
<th>PRICE/UNIT</th>
<th>QTY</th>
<th>DISCOUNT %</th>
<th>TAX</th>
<th>TOTAL</th>
</tr>
#foreach ($bill[0]->ITEM_DETAILS as $item)
<tr>
<td>{{$item->id}}</td>
<td>{{$item0->item_name}}</td>
</tr>
#endforeach
</table>
When I stored the same data using ng-init and tried iterating through it using ng-repeat it worked.
Can anyone explain this behaviour.
Thanks in advance
If you are getting a json in the view and assuming that $bill contains the json:
<table>
<tr class="left">
<th>SR NO</th>
<th>ITEM NAME</th>
<th>PRICE/UNIT</th>
<th>QTY</th>
<th>DISCOUNT %</th>
<th>TAX</th>
<th>TOTAL</th>
</tr>
#foreach (json_decode($bill, true) as $item)
<tr>
<td>{{$item['id']}}</td>
<td>{{$item['item_name']}}</td>
<td>{{$item['price']}}</td>
<td>...</td>
</tr>
#endforeach
</table>
If your json comes from the controller you could pass an array and do this.
In controller
$bills = ....
return view('your.template', ['bill' => json_decode($bills, true)]);
In view
<table>
<tr class="left">
<th>SR NO</th>
<th>ITEM NAME</th>
<th>PRICE/UNIT</th>
<th>QTY</th>
<th>DISCOUNT %</th>
<th>TAX</th>
<th>TOTAL</th>
</tr>
#foreach ($bill as $item)
<tr>
<td>{{$item['id']}}</td>
<td>{{$item['item_name']}}</td>
<td>{{$item['price']}}</td>
<td>...</td>
</tr>
#endforeach
</table>

How to set thead in vertical in datatable?

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

How we can create a table in excel as the below html?

Suppose I want to create a table with php-excel or laravel-excel that should has the following structure:
<table>
<thead>
<th>Column A</th>
<th>Column B</th>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>
<table>
<thead>
<th>neste column 1</th>
<th>nest column 2</th>
</thead>
<tbody>
<tr>
<td>nested value 1</td>
<td>nested value 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I searched a lot and it seems that excel doesn't support nested table.
If it is possible, how we can do that?

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