I don't think this is related to Vue.js
May 11, 2016
4
Level 1
How can I create a pagination system
How can I create a pagination system in my example because in the controller I test if a field or more are posted there, and here is my code :
the controller's method :
/**
*
Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function search(Request $request)
{
$inputs = $request->all();
$address = $inputs['address'];
$spec = $inputs['speciality'];
$name = $inputs['name'];
$coord = array();
if(isset($inputs['lat']) && isset($inputs['long'])&& !empty($inputs['lat']) && !empty($inputs['long'])){
$users = DB::table('users')
->join('user_has_establishment', 'users.id', '=', 'user_has_establishment.user_id')
->join('establishment', 'establishment.id', '=', 'user_has_establishment.establishment_id')
->join('specialities', 'specialities.id', '=', 'users.speciality_id')
->where('users.role', '=', '20')
->select('users.*', 'establishment.address', 'specialities.intituleProf', 'establishment.horaire',
'establishment.nameE', 'establishment.textLatlng', 'establishment.id as idEs',
'user_has_establishment.id as idUE', 'count(users.id) as total');
// ->toSql();
/* echo '<pre>';
print_r($users);
exit();*/
// ->get();
if (isset($inputs['name']) && !empty($inputs['name'])) {
$users->where('users.name', 'like', '%' . $name . '%');
}
if (isset($inputs['speciality']) && $inputs['speciality'] != 1) {
$users->where('users.speciality_id', '=', $spec);
}
$req = $users;
$users = $users->get();
$tot = $users->count();
foreach($users as $k=>$user){
list($lat, $long) = explode(",", $user->textLatlng);
$distance2 = distance($lat, $long, $inputs['lat'], $inputs['long'], "K");
if($distance2 > 5.00){
unset($users[$k]);
}
}
foreach($users as $user)
{
$rdvs = DB::table('rdv')->where('rdv.user_id', '=', $user->id)
->select('rdv.hour')->get();
$user->rdvs = array();
foreach($rdvs as $r){
$user->rdvs[] = $r->hour;
}
list($latitude, $longitude)=explode(",", $user->textLatlng );
$coord[]['lat'] = $latitude;
$coord[]['long'] = $longitude;
}
$specialities = Speciality::all();
return view('search')
->with('users', $users)
->with('specialities', $specialities);
}
else if(isset($inputs['address']) && empty($inputs['address']) && isset($inputs['speciality']) && $inputs['speciality'] == 1
&& isset($inputs['name']) && empty($inputs['name'])){
$users = array();
}
else {
$users = DB::table('users')
->join('user_has_establishment', 'users.id', '=', 'user_has_establishment.user_id')
->join('establishment', 'establishment.id', '=', 'user_has_establishment.establishment_id')
->join('specialities', 'specialities.id', '=', 'users.speciality_id')
->where('users.role', '=', '20')
->select('users.*', 'establishment.address', 'specialities.intituleProf', 'establishment.horaire',
'establishment.nameE', 'establishment.textLatlng', 'establishment.id as idEs',
'user_has_establishment.id as idUE');
// ->where('users.speciality_id', '=', $spec)
// ->where('users.name', 'LIKE', '%'+$name+'%')
// ->where('establishment.address', 'like', '%'+$address+'%') // ->get();
if (isset($inputs['address']) && !empty($inputs['address'])) {
$users->where('establishment.address', 'like', '%' . $address . '%');
}
if (isset($inputs['name']) && !empty($inputs['name'])) {
$users->where('users.name', 'like', '%' . $name . '%');
}
if (isset($inputs['speciality']) && $inputs['speciality'] != 1) {
$users->where('users.speciality_id', '=', $spec);
}
$tot = $users->count();
$req = $users;
$users = $users->get();
foreach($users as $user)
{
$rdvs = DB::table('rdv')->where('rdv.user_id', '=', $user->id)
->select('rdv.hour')->get();
$user->rdvs = array();
foreach($rdvs as $r){
$user->rdvs[] = strtotime($r->hour);
}
list($latitude, $longitude)=explode(",", $user->textLatlng );
$coord[]['lat'] = $latitude;
$coord[]['long'] = $longitude;
}
/* print_r($user);
exit();*/
}
$specialities = Speciality::all();
/* echo '<pre>';
print_r($users);
print_r($spec);
print_r($address);
print_r($name);
exit();*/
/* echo '<pre>';
print_r($tot);
exit();
*/
return view('search')
->with('users', $users)
->with('specialities', $specialities)
->with('coord', $coord)->with('tot', $tot)
->with('req', $req);
}
and the vue code :
@extends('layouts.layout')
@section('chercher')
<div id="tg-innerbanner" class="tg-innerbanner tg-bglight tg-haslayout">
<div class="tg-searcharea tg-haslayout">
<div class="container">
<div class="row">
<form class="tg-searchform" method="post" name="form" action="/search">
<div class="col-md-5 col-sm-5 col-xs-12">
<div class="form-group">
<input type="text" class="form-control" placeholder="Address"
id="address" name="address">
<a style="height: 69px;margin-left: -104px;padding-top: 28px;position: absolute;"
href="javascript:void(0);" class="search__doc-where__geolc geolc icon-location"
data-toggle="popover" data-placement="bottom"
data-trigger="manual"><span>Autour de moi</span></a>
<input type="text" class="form-control" placeholder="Nom du docteur"
name="name">
</div>
</div>
<div class="col-md-5 col-sm-5 col-xs-8">
<div class="form-group">
<span class="select">
<select class="group" name="speciality" id="speciality">
@foreach($specialities as $specialite)
<option value="{{$specialite->id}}">{{$specialite->intituleProf}}</option>
@endforeach
</select>
</span>
<button type="search" class="tg-btn" >Chercher</button>
</div>
</div>
<div class="col-md-2 col-sm-2 col-xs-4">
<div class="form-group">
<input type="hidden" name="long" id="long">
<input type="hidden" name="lat" id="lat">
</div>
</div>
@if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
</form>
</div>
</div>
</div>
<div class="tg-pagebar tg-haslayout">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>list</h1>
<ol class="tg-breadcrumb">
<li><a href="#">Accueil</a></li>
<li class="active">List</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<!--************************************
Home Slider End
*************************************-->
<script type="text/javascript">
var x = document.getElementById("long");
var y = document.getElementById("lat");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
y.value = position.coords.latitude ;
x.value = position.coords.longitude;
// document.write (x.value+ ', '+ y.value);
}
</script>
@stop
@section('gen')
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12 col-xs-12 pull-right">
<div class="tg-doctors-list tg-haslayout">
<div class="tg-view tg-list-view">
<div class="row">
<!--content-->
@if(!empty($users))
<div class="tg-pagination">
<?php
$perPage = 10;
$cPage=1;
$connection = mysqli_connect("localhost","root","","pfe");
$res = mysqli_query($connection,"SELECT rdv.*,users.name as nameU, patients.name as nameP,
establishment.nameE FROM rdv
inner join establishment on (rdv.establishment_id = establishment.id)
inner join users on users.id = rdv.user_id
inner join patients on patients.id = rdv.patient_id
WHERE establishment.id IN(".implode(",",$ests).")and rdv.date = '".$_POST["nvd"]."'");
?>
<ul>
<li>
<a data-page="prev" href="#prev"><i class="fa fa-angle-left"></i></a>
</li>
<li><a data-page="0" href="#">1</a></li>
<li><a data-page="1" href="#">2</a></li>
<li><a data-page="2" href="#">3</a></li>
<li><a data-page="3" href="#">4</a></li>
<li><a data-page="4" href="#">5</a></li>
<li>
<a data-page="last" href="last"><i class="fa fa-angle-right"></i></a>
</li>
</ul>
</div>
<?php $idc = 0; ?>
@foreach($users as $user)
<article class="tg-doctor-profile">
<div class="tg-box">
<a href="details/{{ $user->idUE }}"><span class="tg-show"><a href="javascrit:void(0)">
<em class="icon-add"></em></a></span></a>
<?php
$photo = $user->image;
$dir = 'users/';
if(!empty($photo)){
echo'<figure class="tg-docprofile-img"><a href="details/{{ $user->idUE }}"><img src="'.$dir.$photo.'"
height="150" width="150" alt="image description"></a></figure>';
}
else{
$photo = 'no-photo.PNG';
echo'<figure class="tg-docprofile-img"><a href="details/{{ $user->id }}"><img src="'.$dir.$photo.'"
height="150" width="150" alt="image description"></a></figure>';
}
?>
<div class="tg-docprofile-content">
<div class="tg-heading-border tg-small">
<h3><a href="/details/{{ $user->idUE }}">{{ $user->name }}</a><span></span></h3>
</div>
<div class="tg-description">
<h5><font color="#00BFFF"> {{ $user->nameE }}</font><span></span></h5>
</div>
<ul class="tg-doccontactinfo">
<li>
<i class="fa fa-user-md"></i>
<span> {{ $user->intituleProf }} <br></span>
</li>
<li>
<i class="fa fa-map-marker"></i>
<address>{{ $user->address }}</address>
</li>
<li>
<i class="fa fa-phone"></i>
<span> {{ $user->tel }} <br></span>
</li>
<li>
<i class="fa fa-envelope-o"></i>
<span> {{ $user->email }} <br></span>
</li>
</ul>
<a href="/details/{{ $user->idUE }}" class="comm"><i class="fa fa-plus-square"></i>Plus de détail</a>
</div>
</div>
</article>
<style>
.calender_item{
text-align: center;
}
.calender_item:hover{
color:white;
background:blue;
}
.calender_item_active{
color:lightskyblue;
background:blue;
}
</style>
<script>
$("document").ready(function(){
$('.calender_item').click(function() {
// $( this).setColor('blue');
$('.calender_item').removeClass("calender_item_active");
$(this).addClass("calender_item_active");
}); });
// $('.calender_item').css('background','blue').css('color','white');
</script>
@endforeach
@else
Aucun résultat trouvé
@endif
</div>
</div>
</div></div>
</div></div>
@stop
@section('map')
<div class="tg-postionabsulote">
<div class="col-md-5 col-sm-12 col-xs-12 tg-divheight pull-left">
<div class="row tg-divheight">
<div class="tg-mapbox">
<div id="map_canvas" class="tg-location-map tg-haslayout"></div>
</div>
</div>
</div>
</div>
<?php
$test = array();
foreach($users as $user){
list($test['lat'][$user->id],$test['lng'][$user->id])=explode(",", $user->textLatlng);
$test['id'][$user->id] = $user->id;
}
/* echo '<pre';
print_r($test);
*/
?>
@if(!empty($users))
<script type="text/javascript">
"use strict";
/* global document */
jQuery(document).ready(function () {
/***
Adding Google Map.
***/
/* Calling goMap() function, initializing map and adding markers. */
jQuery('#map_canvas').goMap({
maptype: 'ROADMAP',
latitude: 36.504234,
longitude: 9.668328,
zoom: 8,
scaleControl: true,
scrollwheel: false,
// group: 'category',
markers: [
// Markers for Doctor Search
<?php
foreach($users as $user){
$i = $user->id;
list($latitude, $longitude)=explode(",", $user->textLatlng );
?>
{latitude: <?php echo $latitude ?>, longitude: <?php echo $longitude ?>, group: 'doctors', icon: 'images/map/<?php echo $i?>.png', html: {
content: '<br /><a href="/deatils/<?php echo $i ?>.html">Read More</a>'
}},
<?php }?>
]
});
$.goMap.ready(function () {
var bounds = $.goMap.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var markers = [];
for (var i in $.goMap.markers) {
var temp = $($.goMap.mapId).data($.goMap.markers[i]);
markers.push(temp);
}
var markerclusterer = new MarkerClusterer($.goMap.map, markers);
});
/* Hiding all the markers on the map. */
$(".group").change(function () {
var group = $(this).val();
if (group == 'all')
for (var i in $.goMap.markers) {
$.goMap.showHideMarker($.goMap.markers[i], true);
}
else {
for (var i in $.goMap.markers) {
$.goMap.showHideMarker($.goMap.markers[i], false);
}
$.goMap.showHideMarkerByGroup(group, true);
}
});
// Click Function for Map Banner
$(".search_banner").on('click', function (event) {
event.preventDefault();
$('.tg-banner-content').hide('slide', {direction: 'left'}, 1000);
$('.show-search').show('slide', {direction: 'right'}, 2000);
});
$(".show-search").on('click', function (event) {
event.preventDefault();
$('.tg-banner-content').show('slide', {direction: 'left'}, 2000);
$(this).hide('slide', {direction: 'right'}, 1000);
});
});
</script>
</section>
@endif
<div class="section">
</div>
@stop
Level 1
the best response is when you send the request to the url like that : $users = $users->paginate(15);
$users->appends(['avancee' => $users]);
then in the return statement we must add this: ->with( compact('users')) ->render();
Also the routes file must be edited (by combining the post and get twice methods). Therefore, post for the first results' page and the get for the others (results in that case are stored on the server crash)
Route::post('/avancee{page?}', 'ViewController@search');
Route::get('avancee{page?}','ViewController@search');
finally in the view: {!! $users->appends(Input::except('page'))->render() !!}
Please or to participate in this conversation.