The Laravel project I used during the "Building DataTables with Livewire" Laracasts video
This is the full Laravel project from the "Building DataTables with Livewire" video on Laracasts.
cp .env.example .envartisan key:generatecomposer install
If you change DB_CONNECTION to mysql
"select * from contacts order by `` asc limit 10 offset 0 " is issued.
order by is empty.
It works with sqlite but not with MySQL.
I think it is good to set the initial value.
app/Http/Livewire/ContactsTable.php Line 13
public $ sortField = 'id';
Hi Caleb, I liked very much this Livewire. I facing some issue.
What I did: I install fresh laravel(6) and install package successfully. I have installed laravel/ui vue.
in the file resources/js/app.js we have peace of code which says `
/**
const app = new Vue({
el: '#app',
});`
Iivewire is not firing any event, not working if it is inside Vue "owned" div element. Maybe I am doing wrong putting inside the Vue
Doh. Way too many tabs open.
Soryby / search model not work .
Hi Caleb,
I am a newbie programmer and just learning Laravel. I really like your beautiful package here and was following along with the video in Laracasts.
In the partial _sort-icon.blade.php, I am encountering an undefined variable error for $sortField.
I saw in the comment section your tweet and it states that public properties are not automatically passed any more to views.
My question is, should the code in this repo be updated to the following:
_sort-icon.blade.php:
@if ($this->sortField !== $field)
<i class="text-muted fas fa-sort"></i>
@elseif ($this->$sortAsc)
<i class="fas fa-sort-up"></i>
@else
<i class="fas fa-sort-down"></i>
@endif
The above code worked for me. 😊
PS: I am an avid lurker in Github and really not familiar on how to use it. I just love your package very much that I decided to make an account. Please excuse me for any mistakes and feel free to close this issue if it is unnecessary.
Thank you. 🙂
In the data-tables tutorial, the macros in the AppServiceProvider are missing
The following scenario: User browses through table (clicks some pages forward) and then starts searching using the search input. The user will see a blank table even if there are matching records. Thats because the page param is still on page 3 for example.
Would be better to jump to the first page when entering a new search term. How can I achieve that?
I have tried to make this sorting thing work in my data table but no luck so far.
This is my code:
CustomersTable.php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
class CustomersTable extends Component
{
use WithPagination;
public $perPage = 10;
public $sortField;
public $sortAsc = true;
public $search = '';
/**
* Livewire Lifecycle Hook
*/
public function updatingSearch(): void
{
$this->gotoPage(1);
}
public function sortBy($field)
{
if ($this->sortField === $field)
{
$this->sortAsc =! $this->sortAsc;
} else {
$this->sortAsc = true;
}
$this->sortField = $field;
}
public function render()
{
return view('livewire.customers-table', [
'customers' => \App\Models\Customers::search($this->search)
->orderBy($this->sortField, $this->sortAsc ? 'asc' : 'desc')
->paginate($this->perPage),
]);
}
}
customers-table.blade.php
<div class="animated fadeIn">
<div class="row mt-2">
<div class="col-lg-12">
<div class="card rounded">
<div class="card-header rounded-top pb-2">
<p class="d-inline align-middle float-left pt-1 font-weight-bold"><i class="icon-people"></i> Customers</p>
<div class="d-inline align-middle float-right">
<a href="/customers/create" class="btn btn-success rounded mt-0"><i class="icon-plus"></i> Add New Customer</a>
</div>
<div class="input-group col-4 float-right">
<input type="text" wire:model="search" class="form-control rounded-left border-right-0 font-italic" placeholder="Type in and search..." >
<span class="input-group-addon bg-white border-left-0 rounded-right"><i class="fa fa-search"></i></span>
</div>
</div>
<div class="card-body pb-0">
@if(count($customers) < 1)
<div class="float-left mb-4">
<h6 class="d-inline">No customer found</h6>
<a class="ml-3 align-middle btn btn-success rounded" href="/customers/create"><i class="icon-plus"></i> Add Customer</a>
</div>
@else
<table class="table table-responsive-sm table-bordered"> <!-- table-sm !-->
<thead>
<tr>
<th><a wire:click.prevent="sortBy('id')" role="button" href="#">
ID
@include('inc.sort-icon', ['field' => 'id'])
</a></th>
<th><a wire:click.prevent="sortBy('FirstName')" role="button" href="#">
Name
@include('inc.sort-icon', ['field' => 'FirstName'])
</a></th>
<th><a wire:click.prevent="sortBy('Gender')" role="button" href="#">
Gender
@include('inc.sort-icon', ['field' => 'Gender'])
</a></th>
<th><a wire:click.prevent="sortBy('Phone')" role="button" href="#">
Phone
@include('inc.sort-icon', ['field' => 'Phone'])
</a></th>
<th><a wire:click.prevent="sortBy('Email')" role="button" href="#">
Email
@include('inc.sort-icon', ['field' => 'Email'])
</a></th>
<th><a wire:click.prevent="sortBy('Address')" role="button" href="#">
Address
@include('inc.sort-icon', ['field' => 'Address'])
</a></th>
<th><a wire:click.prevent="sortBy('created_at')" role="button" href="#">
Created at
@include('inc.sort-icon', ['field' => 'created_at'])
</a></th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach($customers as $customer)
<tr>
<td>{{ $customer->id }}</td>
<td><a href="/customers/{{ $customer->id }}/edit"> {{ $customer->FirstName }} {{ $customer->LastName }}</a></td>
<td>{{ $customer->Gender }}</td>
<td>{{ $customer->Mobile }}</td>
<td>{{ $customer->Email }}</td>
<td>{{ $customer->Address }}, {{ $customer->City }}</td>
<td>{{ $customer->created_at }}</td>
<td>
<div class="d-inline float-left mr-1">
<a class="btn btn-primary btn-sm rounded" href="/jobs/{{ $customer->id }}/create">New Job</a>
</div>
<div class="d-inline float-left mr-1">
<a href="/customers/{{ $customer->id }}/edit" class="btn btn-secondary btn-sm rounded">Edit</a>
</div>
<div class="d-inline float-left mr-1">
{!!Form::open(['action' => ['CustomersController@destroy', $customer->id], 'method' => 'POST'])!!}
{{Form::hidden('_method', 'DELETE')}}
{{Form::submit('Delete', ['class' => 'font-weight-bold align-middle btn btn-danger btn-sm rounded'])}}
{!!Form::close()!!}
</div>
</td>
</tr>
@endforeach
</tbody>
</table> <!-- end of Table !-->
<div class="float-left">
{{ $customers->links() }}
</div>
<div class="float-right text-muted pb-3">
Showing {{ $customers->firstItem() }} to {{ $customers->lastItem() }} out of {{ $customers->total() }} customers
</div>
@endif
</div> <!-- end of Card Body !-->
</div>
</div>
the routes/web.php
Route::resource('customers', 'CustomersController');
Which points to CustomersController@index which I think it doesn't affect anything in any way since the index function looks like this:
public function index()
{
return view('customers.index');
}
customers/index.blade.php
@section('content')
@livewire('customers-table')
@endsection
The search is working just fine, the pagination is also working fine, the sorting is not.
I apologise for the big chunk of code I posted but, if someone will ever read this, I want him to have the entire context...
Happy coding folks. Livewire is great, I just don't fully understand it... I find it hard to debug since the ajax calls are being made... no errors no nothing... it's just not working.
If anyone will even consider to help me out on this one... thanks so much for your time. I owe you big time.
after clone n instal why not working
Unknown column '' in 'order clause' (SQL: select * from contacts order by `` asc limit 10 offset 0)
thanks you
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.