how to display a blob file (image) from mysql using laravel - mysql

how to get the blob file (photo) that has already existed from MySQL using laravel, I am creating contact detail for the employee and it needs a photo and some of those employees don't have a picture in the database. beginners here. :)
this my controller
public function index()
{
$user = DB::table("user_basic")
->leftjoin("user_status","user_status.status_id" , "=" , "user_basic.user_id")
->leftjoin("user_employment","user_employment.emp_id" , "=" , "user_basic.user_id")
->leftjoin("user_photo","user_photo.photo_id" , "=" , "user_basic.user_id")
->select("user_status.*", "user_basic.*" , "user_employment.*","user_photo.*" )
->get();
if (request()->filled('status') && request('status') !== null) {
$user = $user->where('status_xtitle', request()->status);
}
$datatables = datatables::of($user);
return view("pages.Directory.index")->with("user",$user);
}
this is the index.blade where I will put the photo
</div>
<div class="row ">
<div class="col-12">
<div class="card-body">
<table class="table table-hover table-fw-widget " id="table4">
<thead>
<tr>
<th scope="col">Employee's information</th>
<th scope="col">Contacts</th>
<th scope="col">Employment</th>
</tr>
</thead>
<tbody>
#foreach ($user as $user)
<tr>
<td scope="row">
<div class="d-flex align-items-center">
<img src="" alt="">
<div>
<P><h6>
<?php
$arr = array($user->user_xfirstname,
$user->user_xmiddlename,
$user->user_xlastname);
echo join(" ",$arr);
?>
</h6></P>
<p id = "status"><small class= "text-muted">{{$user->status_xtitle}}</small> </p>
</div>
</div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="col-1"></div>
</div>
</form>

Related

HTML Table wrap col data to fit to the view

Have a question about the HTML view related to the table.
In my HTML view, I have a table.
This is worked in a responsive way when changing the view.
Here I want to change the view that the responsive view comes with a scroll bar.
I want to change it to fit all columns to the view and wrap the column contents.
Any suggestions to do it?
<div class="col-md-12 col-sm-12 grid-margin stretch-card">
<div class="card shadow-card-l">
<div class="card-body">
<center><h4 class="card-title">Task Related Documents</h4></center>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Document Type</th>
<th>Document Note</th>
<th>File Name</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.TaskFilesHistoryViewModel.OrderByDescending(x => x.Id))
{
<tr class="even pointer">
<td>#item.File_Type</td>
<td>#item.Note</td>
<td>#item.File_Name</td>
<td>
<a href="#Url.Action("DownloadTaskImage","Ajax", new { id = item.Id})" target="_blank" rel="publisher tag" class="btn btn-outline-info ti-import" />
<a href="#Url.Action("RetrieveTaskImage","Ajax", new { id = item.Id})" target="_blank" rel="publisher tag" class="btn btn-outline-success fa ti-eye" />
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>

React-Paginate causing table component to throw react Hydration issue

I'm having an issue where my table component is throwing due to the React-Paginate package having a list for the pagination, a UL cannot be a child of a <tbody/ tag, causing React to throw a hydration error whenever I reload the page, this is my component code below, and below that is also my Items code, which is what paginated items renders for each item in the array.
<table className="table-auto w-full">
<thead>
<tr>
<th className="p-1 whitespace-nowrap float-left">
{headers[0]}
</th>
<th className="p-1 whitespace-nowrap">
<p className="float-right">{headers[1]}</p>
</th>
</tr>
</thead>
<tbody>
<PaginatedItems itemsPerPage={paginateItemsNum} />
</tbody>
</table>
Items Code:
function Items({ currentItems }) {
return (
<>
{currentItems &&
currentItems.map((item) => (
<tr key={item.Id}>
<td className="p-2 whitespace-nowrap">
<div className="flex items-center">
<div className="font-medium text-black float-left">
{item.Name}
</div>
</div>
</td>
<td className="p-2 whitespace-nowrap">
<div>
<div className="font-medium text-black float-right">
{item.EnabledString}
</div>
</div>
</td>
</tr>
))}
</>
);
}

How can I prevent this table row from appearing behind my table header?

My goal is to apply sticky headers to a table using a pure CSS approach.
Using this as a guide. Table fixed header and scrollable body
When the page renders the table looks fine, when I start scrolling you can see a sliver of the data above the table header.
<div class="large-12 columns" ng-show="$ctrl.filteredParticipantsDt.length != 0">
<div style="max-height: 260px; overflow: auto;" class="tableFixHead">
<table border="1" style="width: 100%" >
<thead>
<tr>
<th><a ng-click="$ctrl.orderByField='ID_NBR'; $ctrl.reverseSort = !$ctrl.reverseSort" refresh-session>IDENTIFIER
<span ng-show="$ctrl.orderByField == 'ID_NBR'"><span ng-show="!$ctrl.reverseSort" class="fi-arrow-up"></span><span ng-show="$ctrl.reverseSort" class="fi-arrow-down"></span></span></a></th>
<th><a ng-click="$ctrl.orderByField='CNCAT_LST_FRST_M_I'; $ctrl.reverseSort = !$ctrl.reverseSort" refresh-session>PERSON
<span ng-show="$ctrl.orderByField == 'CNCAT_LST_FRST_M_I'"><span ng-show="!$ctrl.reverseSort" class="fi-arrow-up"></span><span ng-show="$ctrl.reverseSort" class="fi-arrow-down"></span></span></a></th>
<th><a ng-click="$ctrl.orderByField='SHRT_DESC'; $ctrl.reverseSort = !$ctrl.reverseSort" refresh-session>ROLE
<span ng-show="$ctrl.orderByField == 'SHRT_DESC'"><span ng-show="!$ctrl.reverseSort" class="fi-arrow-up"></span><span ng-show="$ctrl.reverseSort" class="fi-arrow-down"></span></span></a></th>
<th><a ng-click="$ctrl.orderByField='EFF_DT'; $ctrl.reverseSort = !$ctrl.reverseSort" refresh-session>EFFECTIVE DATE
<span ng-show="$ctrl.orderByField == 'EFF_DT'"><span ng-show="!$ctrl.reverseSort" class="fi-arrow-up"></span><span ng-show="$ctrl.reverseSort" class="fi-arrow-down"></span></span></a></th>
<th><a ng-click="$ctrl.orderByField='END_DT'; $ctrl.reverseSort = !$ctrl.reverseSort" refresh-session>END DATE
<span ng-show="$ctrl.orderByField == 'END_DT'"><span ng-show="!$ctrl.reverseSort" class="fi-arrow-up"></span><span ng-show="$ctrl.reverseSort" class="fi-arrow-down"></span></span></a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in $ctrl.filteredParticipantsDt|orderBy:$ctrl.orderByField:!$ctrl.reverseSort"
ng-click="$ctrl.setSelected(a)"
ng-class="{Highlight: a.PCR_ID === $ctrl.Selected.PCR_ID, endDatedRow: a.END_DATED_IND == 'Y'}" refresh-session>
<td>{{a.ID_NBR}}</td>
<td>{{ a.CNCAT_LST_FRST_M_I }}</td>
<td>{{a.SHRT_DESC}}</td>
<td>{{a.DISPLAYEFF}}</td>
<td>{{a.DISPLAYEND || ''}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I know its a bit late to answer, but I had this exact issue. The problem is the table header has an invisible border that needs to be removed in order to not see that extra pixel behind it. The inline solution for brevity sake:
<div class="large-12 columns" ng-show="$ctrl.filteredParticipantsDt.length != 0">
<div style="max-height: 260px; overflow: auto;" class="tableFixHead">
<table border="1" style="width: 100%" >
<thead>
<tr(style="border-style:hidden")>
. . .

in gridview the datatable datas are not binding

I have an issue in displaying the mysql data in a gridview. Am using Angular 4, to bind the data and show in a gridview.
I can bind the grid, but data are not displaying in the grid and there is no error in the console too. Even i am getting the response in console.
this is my html code for gridview:
<sa-widgets-grid>
<!-- row -->
<div class="row">
<!-- NEW WIDGET START -->
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<!-- Widget ID (each widget will need unique ID)-->
<sa-widget>
<!-- widget options:
usage: <sa-widget id="wid-id-0" [editbutton]="false">
[colorbutton]="false"
[editbutton]="false"
[togglebutton]="false"
[deletebutton]="false"
[fullscreenbutton]="false"
[custombutton]="false"
[collapsed]="true"
[sortable]="false"
-->
<header>
<span class="widget-icon"></span>
<h2>Add Broadcaster </h2>
<div class="widget-toolbar">
<!--<button class="btn"><span class=""><i class="fa fa-plus-square"></i> </span><span>Import</span></button>-->
<button class="btn"><span class=""><i class="fa fa-plus-square"></i> </span><span>Add New</span></button>
</div>
</header>
<!-- widget div-->
<div>
<!-- widget content -->
<div class="widget-body">
<!-- this is what the user will see -->
<div class="widget-body no-padding">
<sa-datatable [options]="{
data: broacasterall,
columns: [
{data:'id'},
{data:'broadcaster_name'},
{data:'broadcaster_channel_name'},
{data:'broadcaster_email'},
{data:'w_application_name'},
{data:'state_code'}
],
buttons: [
'colvis'
]
}" tableClass="table table-striped table-bordered table-hover">
<thead>
<tr>
<th data-class="expand">Id</th>
<th data-class="expand">Broadcaster Name</th>
<th data-class="expand">Channel Name</th>
<th data-class="expand">Category Name</th>
<th data-class="expand">Email</th>
<th data-class="expand">Application Name</th>
<th data-class="expand">State,City</th>
<th data-class="expand">Video URL</th>
<!-- <th data-class="expand">YouTube Key</th>
<th data-class="expand">FaceBook Key</th>
<th data-class="expand">Haappyapp Key</th> -->
</tr>
</thead>
</sa-datatable>
</div>
</div>
<!-- end widget content -->
</div>
<!-- end widget div -->
</sa-widget>
this is my component.ts file:
in this code i call the broadcaster response and am getting the response in the console also .
here also there is no issues.when i debug the code am getting the data in the grid perfectly,however in localhost it's not binding.
getBroadcasterAllGrid()
{
this.broadcasterService.getAllBroadcasters()
.subscribe(
broadcasterResponse=>{
this.broacasterall=broadcasterResponse;
}),
error => this.errorMessage = <any>error;
};

Table data overflowing past container

When a field value is too long in my bootstrap table, the table will extend to the length of the parameter even if its past the container. The only way I was able to somewhat prevent this is by using responsive-table, however then a scroll bar shows up on the bottom and you have to scroll all the way to the right to see the table data. How can I make it so when my table reaches the length of the container, the row data will wrap?
Here is an image of what is going on: http://i.stack.imgur.com/Bo1dO.jpg
Here is a portion of my view, the CSS and example can be seen here: https://jsfiddle.net/bsxtpoqd/
<div class="container">
<div class="row tab-content">
<div class="row">
<h3>Assigned Games</h3>
<p>Please enter a search string in the textbox to search for users</p>
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="tableSearch" placeholder="Enter search term...">
</div>
</form>
<div class="table">
<table id="userTable" class="table">
<thead>
<tr>
<th>UserName</th>
<th>Alternate</th>
<th>Email</th>
<th>Assigned Games</th>
<th>Unassigned Games</th>
</tr>
</thead>
<tbody>
#foreach (var user in Model)
{
<tr>
<td>#Html.ActionLink(user.UserName, "_GameAssigner", "Admin", new { insUserId = user.InstitutionUserId }, new { #class = "modal-link" })</td>
<td>
#user.AlternateId
</td>
<td>#user.Email</td>
<td>
#if (user.Assigned.Any())
{
<a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
data-content="#foreach (var gameName in user.Assigned){<div>#gameName</div>}">
#user.Assigned.Count</a>
}
else
{
<div class="text-warning">0</div>
}
</td>
<td>
#if (user.Unassigned.Any())
{
<a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
data-content="#foreach (var gameName in user.Unassigned) {<div>#gameName</div>}">
#user.Unassigned.Count</a>
}
else
{
<div class="text-warning">0</div>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
You need to break up the long word.
<td style="word-break:break-all">
This is you need:
<style>
td
{
word-break: normal;
}
</style>