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() }}
Related
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 have table data , its showing data from database .
i want to showing data with Action and its will showing Modal and data .
my view like this :
<div class="table-responsive">
<table class="table table-striped jambo_table bulk_action" id="table2">
<thead>
<tr class="headings">
<th class="column-title" style="display: table-cell;">No </th>
<th class="column-title" style="display: table-cell;">Nama Pegawai </th>
<th class="column-title" style="display: table-cell;">Lihat Data Keluarga </th>
</tr>
</thead>
<tbody>
#php
$no=0;
#endphp
#foreach ($keluarga as $i)
<tr class="even pointer">
<td class="a-center ">{{ ++$no }}</td>
<td class=" ">{{ $i->users->nama}} </td>
<td class=" "><a href="/project/d_keluarga/show-keluarga/{{$i->id}}"><button type="button" class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-lg"> Show Data</button> // to showing data By Id on table
</td>
</tr>
#endforeach
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Data Keluarga</h4>
</div>
<div class="modal-body">
<h4></h4>
//here to paste data
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</tbody>
</table>
</div>
My Controller :
public function keluarga()
{
$keluarga = Data_keluarga::with('users')->get();
return view('admin.keluarga',['keluarga' => $keluarga ]);
}
i usually parse it like $i->name and its in another page . not in Modal .
but , how to show data in modal by id ?
Here's an answer for your exact question.
Add data-title="{{ $i->users->nama }}" to your button.
<button type="button" class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-lg" data-title="{{ $i->users->nama }}"> Show Data</button>
Add this jQuery snippet.
$('.bs-example-modal-lg').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var title = button.data('title')
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text(title)
})
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 have question on it for the vue.js I already have a library vue.js in my web application site. Now my problem is when i try to use the Form Input Bindings the v-model this line of code here below
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
what i notice is it says
Use of undefined constant test - assumed 'test'
So i try to see the solution on this one by adding a # beacuase laravel is using blade template. Now when i add a # the error is gone but the render goes this way {{ test }} . Why does it not rendered correctly in my browser?. Can someone help me figured this thing out?. Any help is muchly appreciated. TIA.
Here is my code
#extends('layouts.app')
#section('title', 'Cases New Invoice | RMTG')
#section('content')
<div id="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
Dashboard
</li>
<li class="breadcrumb-item active">Cases New Invoice</li>
</ol>
<div class="row">
<div class="col-lg-12">
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-file"></i>
New Invoice</div>
<div class="card-body">
<div class="form-group">
<div class="form-row">
<div class="col-md-6" >
<div class="table-responsive">
<form action="" method="post">
{{ csrf_field() }}
<table class="table table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th width="150px;">Contact Name: </th>
<td>{{ $opp->contacts }}</td>
</tr>
<tr>
<th>Case Number:</th>
<td>OPP -{{ $opp->code }}</td>
</tr>
<tr>
<th>Case Name:</th>
<td>{{ $opp->tax_year }}</td>
</tr>
<tr>
<th>Item Code:</th>
<td>
<div id="app-item">
<select name="itemCode" class="form-control">
<option v-for="item in items" v-bind:value="item.value">
#{{ item.text }}
</option>
</select>
</div>
</td>
</tr>
<tr>
<th>Notes: </th>
<td>
<input type="text" name="notes" class="form-control" />
</td>
</tr>
<tr>
<th>Amount: </th>
<td><input v-model="test" type="text" name="amount" class="form-control" required />
</td>
</tr>
<tr>
<th>VAT 20% Amt: </th>
<td>
<input type="text" name="vatAmount" class="form-control" />
</td>
</tr>
<tr>
<th>Total Amount: </th>
<td>
<input type="text" name="totalAmount" class="form-control" />
</td>
</tr>
</thead>
</table>
<div class="pull-right">
<button type="submit" class="btn btn-success">
<i class="fa fa-save" aria-hidden="true" style="font-size:24px"></i> Save
</button>
</div>
</form>
</div>
</div>
<div class="col-md-6" >
<h3>Amount Due: £ #{{ test }}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//Item code
new Vue({
el: '#app-item',
data: {
items:[
{ text:'Tax Returns', value: 'Tax Returns' },
{ text:'UTR Filing', value: 'UTR Filing'}
]
}
})
</script>
#endsection
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.