Merhabalar projelerimde genellikle serverside datatable kullanıyorum.Çözemediğim bir sıkıntım var size danışmak istedim.
Yararlandığım kaynak : https://yajrabox.com/docs/laravel-datatables/10.0
Controller dosyam
public function DatabaseTrim(DatabaseTrimDatatable $databaseTrimDatatable)
{
$supplier = Suplier::all();
$trimCategory = TrimCategory::all();
return $databaseTrimDatatable->render('submember.trim.index', compact('supplier', 'trimCategory'));
}
index dosyam
@extends('submemberorder.master.master')
@section('content')
<div id="content">
<div class="card">
<div class="card-header">TRİMS (ACCESSORY)
<button type="button" class="btn btn-primary openTrimModal" data-toggle="modal" data-target="#addNewTrim">
Add New Trim</button>
</div>
<div class="card-body">
{{ $dataTable->table() }}
</div>
</div>
<div class="page-footer"></div>
</div>
@endsection
datatable dosyam
<?php
namespace App\DataTables\Submember;
use App\Models\MaterialTrim;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Services\DataTable;
class DatabaseTrimDatatable extends DataTable
{
/**
* Build DataTable class.
*
* @param mixed $query Results from query() method.
* @return \Yajra\DataTables\DataTableAbstract
*/
public function dataTable($query)
{
$ImagePath = asset('TrimPhoto');
function is_image($filename)
{
$extension = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
$allowed_extensions = ['jpg', 'jpeg', 'png', 'gif']; // İzin verilen resim dosya uzantıları
return in_array($extension, $allowed_extensions);
}
return datatables()
->eloquent($query)
->addColumn('id', function (MaterialTrim $trim) {
return $trim->id;
})
->addColumn('images', function (MaterialTrim $trim) use ($ImagePath) {
$images = '';
if ($trim->trimPhoto) {
foreach ($trim->trimPhoto as $image) {
if (is_image($image->photo_name)) {
$images .= sprintf(
'<img src="%s" style="%s">',
$ImagePath.'/'.$image->photo_name,
'width:60px; height:60px; border-radius:100%; object-fit:cover;',
);
} else {
$images .= '<i class="fas fa-file"></i>';
}
}
}
return '<div class="d-flex align-items-center">'.$images.'</div>';
})
->addColumn('category', function (MaterialTrim $trim) {
return $trim->trimCategory->name ?? '';
})
->addColumn('trim_name', function (MaterialTrim $trim) {
return $trim->trim_name ?? '';
})
->addColumn('trim_code', function (MaterialTrim $trim) {
return $trim->trim_code ?? '';
})
->addColumn('trim_supplier', function (MaterialTrim $trim) {
return $trim->suplier->name ?? '';
})
->addColumn('trim_color', function (MaterialTrim $trim) {
return $trim->trim_color ?? '';
})
->addColumn('trim_notes', function (MaterialTrim $trim) {
return $trim->trim_notes ?? '';
})
->addColumn('actions', function (MaterialTrim $materialTrim) {
$destroyUrl = route('submember.database.trim.destroy', $materialTrim);
$csrf = csrf_token();
$data = ['materialTrim' => $materialTrim->toArray()];
$jsonData = htmlspecialchars(json_encode($data), ENT_QUOTES, 'UTF-8');
return <<<html
<div class="d-flex">
<button type="button" class="btn btn-primary openTrimEdit" data-item="{$jsonData}">
Edit
</button>
<form action="{$destroyUrl}" method="post">
<input type="hidden" name="_token" value="{$csrf}" />
<input type="hidden" name="_method" value="DELETE" />
<button type="submit" onclick="return confirm(`Are you Sure Delete?`)" class="btn btn-danger">Delete</button>
</form>
</div>
html;
})
->rawColumns(['actions', 'images']);
}
/**
* Get query source of dataTable.
*
* @return \Illuminate\Database\Eloquent\Builder
*/
public function query(MaterialTrim $model)
{
return $model->newQuery()
->byGlobalTeam()
->with('trimCategory', 'suplier', 'trimPhoto');
}
/**
* Optional method if you want to use html builder.
*
* @return \Yajra\DataTables\Html\Builder
*/
public function html()
{
return $this->builder()
->setTableId('database-trims-table')
->columns($this->getColumns())
->minifiedAjax()
->dom('Bfrtip')
->orderBy(1)
->buttons(
Button::make('create'),
Button::make('export'),
Button::make('print'),
Button::make('reset'),
Button::make('reload')
);
}
/**
* Get columns.
*
* @return array
*/
protected function getColumns()
{
return [
Column::make('id'),
Column::make('images'),
Column::make('category'),
Column::make('trim_name'),
Column::make('trim_code'),
Column::make('trim_supplier'),
Column::make('trim_color'),
Column::make('trim_notes'),
Column::make('actions'),
];
}
/**
* Get filename for export.
*
* @return string
*/
protected function filename()
{
return 'Trims_'.date('YmdHis');
}
}
buna bağlı footer dosyam
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
$(this).toggleClass('active');
});
});
function CheckForButtonText(id){
var text = $('#'+id).text();
console.log(text);
if(text==="See Planning"){
$('#'+ id ).text("Close Planning");
}else {
$('#'+ id ).text("See Planning");
}
}
</script>
@toastr_js
@toastr_render
@stack('scripts')
</body>
</html>
config/app dosyam
Yajra\DataTables\DataTablesServiceProvider::class,
Yajra\DataTables\HtmlServiceProvider::class,
Yajra\DataTables\ButtonsServiceProvider::class,
Yajra\DataTables\EditorServiceProvider::class,
ekran görüntüm bu şekilde
https://prnt.sc/zET2pjRWBTW1
Sorunum şu şekilde order , buttonlar ve search kısmı çalışmıyor bir türlü çözemedim