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'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 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() }}
just wondering if anyone knows how i can get an angular expression from within the ng-repeat, in the same object. eg
<!..This is the abgpankit..>
<div ng-repeat="equip in portal[0].equipment[0].sub" id="{{equip.id}}" class="displaydiv">
<div class="contentimg">
<h3>{{equip.item}}</h3>
</div>
<a ng-repeat="x in equip.links" href="#pdfdiv" onclick ="return iframeSrc("{{x.links}}");">
<li>{{x.desc}}</li></a>
<div class="information">
<p>{{equip.info}}</p>
</div>
<div class="items">
<table>
<tr>
<th>Items in Kit</th>
</tr>
<tr>
<td class="icons">
<a href="#panharness" class="panharnessicon">
<div class="iconimg">
<h2>Pan Harness</h2></div></a>
</td>
<td class="icons">
<a href="#displaymodule" class="displaymodicon">
<div class="iconimg">
<h2>Display Module</h2></div></a>
</td>
<td class="icons">
<a href="#halo" class="haloicon">
<div class="iconimg">
<h2>Halo</h2></div></a>
</td>
<td class="icons">
<a href="#edm" class="edmicon">
<div class="iconimg">
<h2>EDM</h2></div></a>
</td>
<td class="icons">
<a href="#dm" class="dmicon">
<div class="iconimg">
<h2>DM</h2></div></a>
</td>
<td class="icons">
<a href="#sft" class="sfticon">
<div class="iconimg">
<h2>SFT</h2></div></a>
</td>
</tr>
</table>
</div>
</div>
Sorry just changed it to the actually code from the site. I believe i have the syntax right, i just though there might be some limitation using an expression in the same object the ng-repeat is defined in.
Once i sort this out i can move further down and fix things up.
Cheers,
Mitchell