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
Related
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 want to add the selected users to a separate table from the list of all users. Similar to the Trello feature, just # and tag their name. I have no idea what to write this function. Any ideas?
This is the form on my interface, and I do not know what to do next in the controller and the form block.
<div class="tab-pane fade" id="group-add-members" role="tabpanel">
<div class="users-manage" data-filter-list="form-group-users">
<div class="mb-3">
<div class="form-group row">
<textarea class="form-control col" name="group-description"
placeholder="Add users by email, each email separated by
commas
e.g: matt#.edu.com, joe#edu.com" rows="3">
</textarea>
</div>
<div class="row align-items-center">
<div class="col">
<button class="btn btn-outline-primary" type="button">
<i class="fad fa-user-plus"></i>Add</button>
<span> or </span>
</div>
<div class="d-none d-md-block col-4 col-lg-5 text-right">
</div>
</div>
<div class="row align-items-center mt-2">
<div class="d-block d-md-none d-sm-block ml-2">
</div>
</div>
</div>
<hr>
<h6>Member info</h6>
<div class="row justify-content-center">
<div class="table-responsive mt-3">
<table class="stripe" id="example" style="width:100%">
<thead>
<tr>
<th></th>
<th class="text-left">Full name</th>
<th class="text-left">Email</th>
<th class="text-left">Student ID</th>\
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="text-left">My name</td>
<td class="text-left">qnv164#edu.com</td>
<td class="text-left">123456789</td>
<td>
<span class="ic-dark"><i class="fad fa-trash-alt"></i></span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th class="text-left">Full name</th>
<th class="text-left">Email</th>
<th class="text-left">Student ID</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
<!-- end div table responsive -->
</div>
<!-- end div row -->
</div>
</div>
{{ profile->description ?? 'Not Available' }}
I am new to Laravel. I am trying to create pagination with the data in my bootstrap table.
This is my index Controller function:
$Courses=Courses::orderBy('name','desc')->paginate(1);
return view('Courses.index')->with('Courses',$Courses);
I am getting this error:
Call to undefined method App\Courses::links() (View:
C:\laragon\www\TharakaCollege\resources\views\Courses\index.blade.php)
The information provided is not enough, however I think the problem is in your view. You have to have a code like this in your blade file:
<div class="pages">
<ul class="pagination ">
<li>{{$Courses->appends(request()->query())->links()}}</li>
</ul>
</div>
Moreover you'd better edit your returning view like this:
return view('Courses.index', array('Courses'=> $Courses));
This is the code in Courses/index.blade.php
<div id="page-wrapper">
#include('includes.message');
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-info">
<div class="panel-heading">
Courses
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center"> code</th>
<th class="text-center">Course Name</th>
<th class="text-center">Category</th>
<th class="text-center">Requirements</th>
</tr>
</thead>
<tbody>
#if(count($Courses)>0)
#foreach($Courses as $Courses)
<tr class="item{{$Courses->id}}">
<td>{{$Courses->id}}</td>
<td>{{$Courses->code}}</td>
<td>{{$Courses->name}}</td>
<td>{{$Courses->category}}</td>
<td>{{$Courses->requirements}}</td>
<td><a class="btn btn-info btn-sm" href="/Courses/{{$Courses->id}}/edit">Edit</a>
</td>
<td>
<form method="POST" action="{{route('Courses.destroy',$Courses->id)}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="_method" value="DELETE">
<input type="submit" class="btn btn-danger btn-sm" value="Delete">
</form>
</td>
</tr>
#endforeach
#else
<p>No Courses</p>
#endif
</tbody>
</table>
{{ $Courses->links() }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You should try this:
<div class="pull-left">
<div class="row">
<div class="col-xs-12">
<div class="explore-pagination">
<nav>
<div class="pagination"> {{ $Courses->render() }}</div>
</nav>
</div>
</div>
</div>
</div>
Try this code instead (modified version of yours):
<div id="page-wrapper">
#include('includes.message');
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-info">
<div class="panel-heading">
Courses
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center"> code</th>
<th class="text-center">Course Name</th>
<th class="text-center">Category</th>
<th class="text-center">Requirements</th>
</tr>
</thead>
<tbody>
#if(count($Courses)>0)
#foreach($Courses as $Course)
<tr class="item{{$Course->id}}">
<td>{{$Course->id}}</td>
<td>{{$Course->code}}</td>
<td>{{$Course->name}}</td>
<td>{{$Course->category}}</td>
<td>{{$Course->requirements}}</td>
<td><a class="btn btn-info btn-sm" href="/Courses/{{$Course->id}}/edit">Edit</a>
</td>
<td>
<form method="POST" action="{{route('Courses.destroy',$Course->id)}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="_method" value="DELETE">
<input type="submit" class="btn btn-danger btn-sm" value="Delete">
</form>
</td>
</tr>
#endforeach
#else
<p>No Courses</p>
#endif
</tbody>
</table>
{{$Courses->appends(request()->query())->links()}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have modified your foreach loop as well as ->links().
When calling the paginate method, you will receive an instance of Illuminate\Pagination\LengthAwarePaginator. In addition to these helpers methods, the paginator instances are iterators and may be looped as an array. So, once you have retrieved the results, you may display the results and render the page links using Blade:
Your blade should contain:
<div class="container">
#foreach ($courses as $course)
{{ $course->fieldName }}
#endforeach
</div>
{{ $courses->links() }}
I am using following bootstrap menu items with My laravel application,
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
</span> Content Management</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Category
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Brand
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Model
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-flash text-success"></span>Province
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
and using this menu bar with #include('menubar) with other blade files. now I need highlight current menu item when I visit each pages. how can I do this?
use
{{ request()->route()->getName() }}
or
{{ route()->currentRouteName() }}
then you can do something like
<a class="{{ request()->route()->getName() === "brands.index" ? "active" : "not-active" }}">
You can use this package I've written to do this: https://packagist.org/packages/arcesilas/active-state
Example with your code:
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Category
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Brand
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-pencil text-primary"></span>Model
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-flash text-success"></span>Province
</td>
</tr>
</table>
</div>
</div>
This package also allows you to check a url, a route with given parameters or a query.
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.