Apr 14, 2020
0
Level 2
Edit and delete button with ajax.
I want to have a blade with a costumn search and edit and delete buttons like in this example https://editor.datatables.net/examples/simple/i18n.html and i have not much experience in webdevelopment.
My blade has a dropdown select menü, which gives me datas with the corresponding ordernumber_id , but it does not work with the edit and delete buttons, where i want to delete the dataset of the corresponding idcablelists.
My show.blade
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kaballiste nach Auftragsnummer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src=" https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src=" https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src=" https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,se-1.0.1/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,se-1.0.1/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css"></script>
</head>
<body>
<div class="container">
<br />
<h3 align="center">Kaballiste nach Auftragsnummer</h3>
<br />
<br />
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="form-group">
<select name="ordernumber_filter" id="ordernumber_filter" class="form-control" required>
<option value="">Wähle Auftragsnummer aus</option>
@foreach($ordernumbers as $ordernumber)
<option value="{{ $ordernumber->idordernumbers}}">{{ $ordernumber->ordernumberscol}}</option>
@endforeach
</select>
</div>
<div class="form-group" align="center">
<button type="button" name="filter" id="filter" class="btn btn-info">Filter</button>
<button type="button" name="reset" id="reset" class="btn btn-default">Reset</button>
</div>
</div>
<div class="col-md-4"></div>
<div class="text-right">
<a href="{{ route('cablelists.create') }}" class="btn btn-success mb-2 float-right">Add</a>
<a href="{{ url('/home') }}" class="btn btn-success mb-2 float-right">Home</a>
</div>
</div>
<br />
<div class="table-responsive">
<table id="cablelist_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>cablenames.IndNr</th>
<th>cablelistscol</th>
<th>cablenamescol</th>
<th>numberofcores</th>
<th>lengh</th>
<th>ordernumberscol</th>
</tr>
</thead>
<tfoot>
<tr>
<th>cablenames.IndNr</th>
<th>cablelistscol</th>
<th>cablenamescol</th>
<th>numberofcores</th>
<th>lengh</th>
<th>ordernumberscol</th>
</tr>
</tfoot>
</table>
</div>
<br />
<br />
</div>
</body>
</html>
<script>
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: {
url: "{{ route('cablelists.show') }}",
},
},
table: "#cablelist_data",
fields: [ {
label: "IndNr:",
name: "IndNr"
}, {
label: "cablelistscol:",
name: "cablelistscol"
}, {
label: "cablenamescol:",
name: "cablenamescol"
}, {
label: "numberofcores:",
name: "numberofcores"
}, {
label: "lengh:",
name: "lengh"
}, {
label: "ordernumberscol:",
name: "ordernumberscol"
},
]
}
)};
fetch_datatable();
function fetch_datatable(ordernumber_id = '')
{
var dataTable = $('#cablelist_data').DataTable({
processing: true,
serverSide: true,
ajax:{
url: "{{ route('cablelists.show') }}",
data:{ordernumber_id:ordernumber_id}
},
dom: 'lBfrtip',
buttons: [
{
extend: 'csv',
text: 'Export CSV',
className: 'btn-space',
exportOptions: {
orthogonal: null
}
},
'excel'
],
columns: [
{
data:'IndNr',
name:'IndNr'
},
{
data:'cablelistscol',
name:'cablelistscol'
},
{
data:'cablenamescol',
name:'cablenamescol'
},
{
data:'numberofcores',
name:'numberofcores'
},
{
data:'lengh',
name:'lengh'
},
{
data:'ordernumberscol',
name:'ordernumberscol'
},
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
]
});
}
$('#ordernumber_filter').click(function(){
var ordernumber_id = $('#ordernumber_filter').val();
if(ordernumber_id != '' && ordernumber_id != '')
{
$('#cablelist_data').DataTable().destroy();
fetch_datatable(ordernumber_id);
}
else
{
alert('Select filter option');
}
});
$('#reset').click(function(){
$('#ordernumber_id').val('');
$('#cablelist_data').DataTable().destroy();
fill_datatable();
});
});
</script>
My CablelistsController:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Carbon\Carbon;
use App\Cablelist;
use App\Cablename;
use App\Cabletyp;
use App\Ordernumber;
use App;
use Auth;
use Redirect;
use PDF;
use DB;
use Validator;
class CablelistsController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public static function index()
{
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
$cablenames = Cablename::with('cablelist')->select('idcablenames', DB::raw
("CONCAT('IndNr: ',IndNr,', ', 'Kabel: ', cablenamescol,', ', numberofcores)
AS full_cablename"))->get();
$ordernumbers = Ordernumber::with('cablelist')->select(['ordernumberscol','idordernumbers'])->get();
return view('cablelist.dynamiccreate')->with('cablenames', $cablenames)
->with('ordernumbers',$ordernumbers);
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
{
if($request->ajax())
{
$rules = array(
'cablelistscol.*' => 'required',
'cablename_id.*' => 'required',
'lengh.*' => 'required',
'ordernumber_id.*' => 'required'
);
$error = Validator::make($request->all(), $rules);
if($error->fails())
{
return response()->json([
'error' => $error->errors()->all()
]);
}
$cablelistscol = $request->cablelistscol;
$cablename_id = $request->cablename_id;
$lengh = $request->lengh;
$ordernumber_id = $request->ordernumber_id;
for($count = 0; $count < count($cablelistscol); $count++)
{
$data = array(
'cablelistscol' => $cablelistscol[$count],
'cablename_id' => $cablename_id[$count],
'lengh' => $lengh[$count],
'ordernumber_id' => $ordernumber_id[$count]
);
$insert_data[] = $data;
}
Cablelist::insert($insert_data);
return response()->json([
'success' => 'Data Added successfully.'
]);
}
}
}
public function show(Request $request)
{
if(request()->ajax())
{
if(!empty($request->ordernumber_id))
{
$ordernumber_id = $request->ordernumber_id;
$data = DB::table('cablelists')
->select('cablenames.IndNr', 'cablelists.cablelistscol', 'cablenames.cablenamescol',
'cablenames.numberofcores' ,'cablelists.lengh', 'ordernumbers.ordernumberscol')
->join('cablenames','cablelists.cablename_id','cablenames.idcablenames')
->join('ordernumbers','cablelists.ordernumber_id', 'ordernumbers.idordernumbers')
->where('cablelists.ordernumber_id', $request->ordernumber_id)
->orderBy('cablename_id','desc')
->get();
}
else
{
$data = DB::table('cablelists')
->select('idcablelists', 'cablelistscol', 'cablename_id', 'lengh', 'ordernumber_id')
->get();
}
return datatables()->of($data)->make(true);
}
$ordernumbers = Ordernumber::with('cablelist')->select(['ordernumberscol','idordernumbers'])->get();
return view('cablelist.show')->with('ordernumbers',$ordernumbers);
}
public function edit($id)
{
$where = array('idcablelists' => $id);
$data['cablelists_info'] = Cablelist::where($where)->first();
$ordernumbers = Ordernumber::with('cablelist')->select(['ordernumberscol','idordernumbers'])->get();
$cablenames = Cablename::with('cablelist')->select(['idcablenames', DB::raw
("CONCAT('IndNr: ',IndNr,', ', 'Kabel: ', cablenamescol,', ', numberofcores)
AS full_cablename")])->get();
return view('cablelist.edit',$data)->with('ordernumbers',$ordernumbers)
->with('cablenames', $cablenames);
}
public function update(Request $request, $id)
{
//https://w3path.com/laravel-6-tutorial-build-your-first-crud-app-with-laravel/
$request->validate([
'cablelistscol' => 'required',
'cablename_id' => 'required',
'lengh' => 'required',
'ordernumber_id' => 'required',
]);
$update = ['cablelistscol'=> $request->cablelistscol, 'cablename_id'=> $request->cablename_id,
'lengh'=> $request->lengh, 'ordernumber_id'=> $request->ordernumber_id];
Cablelist::where('idcablelists',$id)->update($update);
return Redirect::to('cablelists')
->with('success','Great! Cablelist updated successfully');
}
public function destroy($id)
{
//
Cablelist::where('idcablelists',$id)->delete();
return Redirect::to('cablelists')->with('success','Cablelist deleted successfully');
}
}
Thanks for your help.
Please or to participate in this conversation.