I am trying to make a filter for my table but i see a problem there. Maybe the problem is from table structure couse i fetch all structure as it is on mysql. Does anyone help to make this filter in right way.
The collapse content under comment is the head i display when i want to filter
<table class="table table-hover align-middle mb-0">
<thead class="">
<tr>
<th><input type="checkbox" class="form-check-input" v-model="selectAll" title="Select All"></th>
<th v-if="!isHidden[index]" v-for="(header, index) in visibleHeaders" :key="index" scope="col">
{{ header }}
</th>
<th>ACTION</th>
</tr>
</thead>
<!-- Collapsed content ./ -->
<thead class="collapse" id="collapseFilter">
<tr>
<th>#</th>
<th v-for="(header, index) in visibleHeaders" scope="col">
<select id="" class="form-select" >
<option v-for="column in leads">
<div v-for="(atr, key, index) in column">
{{atr}}
</div>
</option>
</select>
</th>
</tr>
</thead>
<!-- ./ Collapse contet -->
<tbody>
<tr v-show="leads.length" v-for="column in leads" >
<td>
<input type="checkbox" class="form-check-input" v-model="selected" :value="column.id" />
</td>
<td v-if="!isHidden[index]" v-for="(atr, key, index) in column">
<div v-if="atr == 'new'">
<span class="badge bg-info">{{ atr }}</span>
</div>
<div v-else-if="atr == 'contract'">
<span class="badge bg-success">{{ atr }}</span>
</div>
<div v-else>
<span >{{ atr }}</span>
</div>
</td>
<td>
<button #click="editLead(column.id)" type="button" class="btn btn-sm btn-secondary" data-mdb-toggle="modal" data-mdb-target="#editLeadModal" >
<i class="fa-solid fa-eye"></i>
</button>
</td>
</tr>
<tr v-show="!leads.length">
<td colspan="12" class="text-center">Sorry :( No data found.</td>
</tr>
</tbody>
</table>
If i try to loop only v-for="column in lead"
I have 2 modals (Modal1 & Modal2), in table after clicked on action button "edit" base on data, i need to open any one modal.
Say if age is less than 36 months then Modal 1 Else Modal 2 should open. Both modals have few data common and few are added newly.
This is my table code
<table id="cowcalfsummery" class="table table-bordered table-hover table" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Breed Type</th>
<th>Gender</th>
<th>Birth Date</th>
<th>Weight (Kg)</th>
<th>Age (in Months)</th>
<th>Maturity Date</th>
<th>Health Status</th>
<th>Action</th>
</tr>
<tbody>
#foreach ($cowcalfdata as $item )
<tr id="item{{$item->id}}">
<td>{{$item->calfID}}</td>
<td>{{$item->breedtype}}</td>
<td>{{$item->gendertype}}</td>
<td>{{ date('d-m-Y', strtotime ($item->birthdate) ) }}</td>
<td>{{$item->weight}}</td>
<td>{{$item->age}}</td>
<td>{{ date('d-m-Y', strtotime ($item->maturitydate) ) }}</td>
<td>{{$item->health}}</td>
<td>
<i class="fas fa-eye" title="View"></i>
**<button type="button"** class="editcowcalfmodal btn btn-success" data-info="{{$item->id}},{{$item->calfID}},{{$item->birthdate}},{{$item->age}},{{$item->breedtype}},{{$item->gendertype}},{{$item->health}},{{$item->status}},{{$item->color}},{{$item->weight}},{{$item->height}},{{$item->previousvaccinedone}},{{$item->maturitydate}}" data-toggle="modal" data-target="#editcowcalfmodal"><i class="far fa-edit" title="Edit"></i></button>
<button type="button" class="btn btn-danger deletecowcalfdatabtn" data-cowcalfid="{{$item->calfID}}"><i class="fas fa-trash" title="Delete"></i></button>
</td>
</tr>
#endforeach
</tbody>
</thead>
</table>
Thanks in Advance.
You want to create a blade If statement and check if $item->age is below 36.
if it is you want to show the first button, else show the second button with a different data-target to your second modal.
#if($item->age < 36)
<button type="button"
class="editcowcalfmodal btn btn-success"
data-info="
{{$item->id}},
{{$item->calfID}},
{{$item->birthdate}},
{{$item->age}},
{{$item->breedtype}},
{{$item->gendertype}},
{{$item->health}},
{{$item->status}},
{{$item->color}},
{{$item->weight}},
{{$item->height}},
{{$item->previousvaccinedone}},
{{$item->maturitydate}}"
data-toggle="modal"
data-target="#editcowcalfmodal">
<i class="far fa-edit" title="Edit"></i>
</button>
#else
<button type="button"
class="editcowcalfmodal btn btn-success"
data-info="
{{$item->id}},
{{$item->calfID}},
{{$item->birthdate}},
{{$item->age}},
{{$item->breedtype}},
{{$item->gendertype}},
{{$item->health}},
{{$item->status}},
{{$item->color}},
{{$item->weight}},
{{$item->height}},
{{$item->previousvaccinedone}},
{{$item->maturitydate}}"
data-toggle="modal"
data-target="#MySecondModal">
<i class="far fa-edit" title="Edit"></i>
</button>
#endif
You also have your table wrong.
You first want to create a <thead> (table header). fill it with table titles, close the <thead> and after that you create the <tbody> (table body) with the content of the item.
This should create a structure like this:
<table>
<thead>
<tr>
<th>Age</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>Cow 1</td>
</tr>
</tbody>
</table>
More information about tables and how to use them
This is my code
#if ($story)
<table class="table-auto my-3 w-full">
<thead class="justify-between">
<tr class="bg-gray-800">
<th class="px-16 py-2">
<span class="text-gray-300">#Id</span>
</th>
<th class="px-16 py-2">
<span class="text-gray-300">Name</span>
</th>
<th class="px-16 py-2">
<span class="text-gray-300">Description</span>
</th>
<th class="px-16 py-2">
<span class="text-gray-300">Actions</span>
</th>
</tr>
</thead>
<tbody class="bg-gray-200">
#foreach ($story as $item)
<tr class="bg-white border-4 border-gray-200">
<td class="px-16 py-2 flex flex-row items-center">
{{ $item->id }}
</td>
<td>
{{ Str::words($item->name, 3, $end = '...') }}
</td>
<td class="px-16 py-2">
{!! Str::words($item->description, 6, $end = '...') !!}
</td>
<td class="px-16 py-2">
<a href="{{ route('dashboard.story.edit', $item->id) }}">
<button class="bg-blue-500 text-white px-4 py-1 border rounded-md hover:bg-white hover:border-blue-500 hover:text-black">
Edit
</button>
</a>
</td>
</tr>
#endforeach
</tbody>
</table>
#else
<p>No results found</p>
#endif
This is my controller
public function index()
{
$story = Story::paginate(10);
return view('admin.story.index', ['story' => $story]);
}
I'm using Laravel 8 and I don't want to show table headers when the value is null. Laravel showing tables headers and not showing the 'No results found' message.
Any help would be appreciated.
when you use paginate, your data split. so if you want check this data empty or not just use
#if( $story->total() )
just replace it with
#if ( $story )
I'm using larashop admin panel.The datatable shows blank spaces below the datatable..The height blank spaces increases with increase in datatable entries.I don't know what to do..
I tried some css.but none of them helped me.
#extends('templates.admin.layout')
#section('title', 'All Courses')
#section('content')
<div class="">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Courses <i class="fa fa-plus"></i> Create New </h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table id="datatable-buttons" class="table table-responsive">
<thead>
<tr>
<th>Course Name</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Course Name</th>
<th>Action</th>
</tr>
</tfoot>
<tbody>
#if(count($courses))
#foreach ($courses as $row)
<tr>
<td>{{$row->name}}</td>
<td>
<i class="fa fa-pencil" title="Edit"></i>
<i class="fa fa-trash-o" title="Delete"></i>
</td>
</tr>
#endforeach
#endif
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
#stop
The screenshot of the issue is provided..please check...
https://i.stack.imgur.com/avqf5.png
I'm really new to MVC hope you can give me a detailed instructions on this.
I have a query in my repository that returns pending users who have a certain role_id. Now my issue is this I when the administrator clicks on the anchor tag of id idMessenger below
<li> Messenger<span class="label label-danger pull-right">{{$messenger->count()}}</span> </li>
I want to show the pending messengers only in the
<div class="col-md-2 left-aside">
<div class="scrollable">
<ul class="inbox-nav capitalize-font">
<li>All Pending Applications </li>
<li>Clients<span class="label label-danger pull-right">{{$elderly->count()}}</span></li>
<li> Messenger<span class="label label-danger pull-right">{{$messenger->count()}}</span> </li>
</ul>
</div>
</div>
<!-- /.left-aside-column-->
<div class="col-md-10 right-aside">
<div class="scrollable">
<div class="table-responsive">
<table id="datable_1" class="table display table-hover contact-list" data-page-size="10">
<thead>
<tr>
<th>Appication ID</th>
<th>Name</th>
<th>Email</th>
<th>Senior Citizen Number</th>
<th>Role/Submitted as</th>
<th>Date of Submission</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach($allPending as $user)
<tr>
<td>{{$user->id}}</td>
<td>{{$user->name}}</td>
<td>{{$user->email}}</td>
<td>{{$user->scn}}</td>
<td><span class="label label-danger">{{$user->roles->name}}</span></td>
<td>{{$user->created_at}}</td>
<td>
<i class="fa fa-check"></i>Approve
</td>
<td>
<i class="fa fa-trash"></i>Delete
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
Can you please teach me how to do it in ajax.