Level 1
Not an expert. Stab in the dark... are your routes okay?
It looks like you should have a resource route declaration and resource controller calling the GET variable.
Sep 10, 2019
7
Level 1
Laravel Datatables Search Error
Hi to my fellow artisians. I'm fairly new to laravel and I'm having dead trouble to find what is is wrong with the below code.
Index.blade.php
@extends('layouts.mainlayout', ['title' => 'Main Activity', 'subtitile1' => 'NA'])
@section('pagecss')
<!-- Page Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Questrial&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,400i,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald&display=swap">
<!-- DataTable CDN -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
<!-- Activity Style -->
<link href="{{ asset('css/activity.css') }}" rel="stylesheet">
@endsection
@section('content')
<!-- Main content -->
<div class="row">
<!-- Card -->
<div class="card table-responsive">
<!-- Card-Header -->
<div class="card-header">
<a href="{{route('activity.create')}}" class="btn btn-success">
Add New Job
</a>
<a href="#" class="btn btn-warning">
Update Status
</a>
</div>
<!-- Card-Body -->
<div class="card-body">
<table id="jobsTable" class="table table-bordered table-striped" width="100%">
<thead>
<tr>
<!-- 0 -->
<th>Action</th>
<!-- 1 -->
<th>JobID</th>
<!-- 2 -->
<th>Job Type</th>
<!-- 3 -->
<th>Job#</th>
<!-- 4 -->
<th>Deal#</th>
<!-- 5 -->
<th>Cyc#</th>
<!-- 6 -->
<th>Deal Name</th>
<!-- 7 -->
<th>Form Type</th>
<!-- 8 -->
<th>Doc Service</th>
<!-- 9 -->
<th>Site</th>
<!-- 10-->
<th>Service<br> Level</th>
<!-- 11-->
<th>Market<br> Category</th>
<!-- 12-->
<th>Job Style</th>
<!-- 13-->
<th>Rendition</th>
<!-- 14-->
<th>Bucket</th>
<!-- 15-->
<th><span>Total Pages</span></th>
<!-- 16-->
<th>Job Received</th>
<!-- 17-->
<th>Due Out</th>
<!-- 18-->
<th>Priority<br> Deal</th>
<!-- 19-->
<th>Structured<br> Products</th>
<!-- 20-->
<th>XBRL</th>
<!-- 21-->
<th>Helpout</th>
<!-- 22-->
<th>Pre<br> Designated<br> Deal</th>
<!-- 23-->
<th>John<br> Waldron</th>
<!-- 24-->
<th>Created By</th>
<!-- 25-->
<th>Updated By</th>
<!-- 26-->
<th>Created At</th>
<!-- 27-->
<th>Updated At</th>
<!-- 28-->
<th>Status</th>
<!-- 29-->
<th><span>Typeset WP</span></th>
<!-- 30-->
<th><span>Typeset Alts</span></th>
<!-- 31-->
<th><span>EO WP</span></th>
<!-- 32-->
<th><span>EO Alts</span></th>
<!-- 33-->
<th><span>Fresh Type</span></th>
<!-- 34-->
<th><span>PDF</span></th>
<!-- 35-->
<th><span>SPIN</span></th>
<!-- 36-->
<th><span>QC</span></th>
<!-- 37-->
<th><span>Solid Read</span></th>
<!-- 38-->
<th><span>Doc Compare</span></th>
<!-- 39-->
<th><span>HTML QC</span></th>
<!-- 40-->
<th><span>HTML Fixes</span></th>
<!-- 41-->
<th><span>PPT</span></th>
<!-- 42-->
<th><span>Pagination</span></th>
<!-- 43-->
<th>Assigned</th>
<!-- 44-->
<th>Team</th>
<!-- 45-->
<th>EPT</th>
<!-- 46-->
<th>Complexity</th>
<!-- 47-->
<th>QAT Check</th>
<!-- 48-->
<th>Preflight</th>
<!-- 49-->
<th>Mercury</th>
<!-- 50-->
<th>Auto Pagination</th>
<!-- 51-->
<th>FI Audit</th>
<!-- 52-->
<th>Proper Coding</th>
<!-- 53-->
<th>Final Preflight</th>
<!-- 54-->
<th>Completed Time</th>
<!-- 55-->
<th>Team 1</th>
<!-- 56-->
<th>Team 2</th>
<!-- 57-->
<th>Team 3</th>
<!-- 58-->
<th>Team 4</th>
<!-- 59-->
<th>No. of<br> Complex<br> TYP WP</th>
<!-- 60-->
<th>No. of <br>Complex<br> TYP Alts</th>
<!-- 61-->
<th>No. of <br>Standard<br> TYP WP</th>
<!-- 62-->
<th>No. of <br>Standard<br> TYP Alts</th>
<!-- 63-->
<th>As per <br>DE Complex<br> TYP WP</th>
<!-- 64-->
<th>As per <br>DE Complex<br> TYP Alts</th>
<!-- 65-->
<th>As per <br>DE Standard<br> TYP WP</th>
<!-- 66-->
<th>As per <br>DE Standard<br> TYP Alts</th>
<!-- 67-->
<th>DE Comments</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- /.card -->
<!-- Confirm Model Box -->
<div id="deleteModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content bg-default">
<div class="modal-header bg-danger">
<h4 class="modal-title">Delete <span id="jcId">Job</span></h4>
</div>
<div class="modal-body">
<h5 style="text-alignment:left;">Are you sure you want to remove this job?</h5>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-outline-success" data-dismiss="modal">Cancel</button>
<button type="button" name="ok_button" id="ok_button" class="btn btn-outline-danger">OK</button>
</div>
</div>
</div>
</div>
<!-- /.Confirm Model Box -->
<!-- /.Main content -->
</div>
@section('pagejss')
<!-- DataTables -->
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.1.0/js/dataTables.rowGroup.min.js"></script>
<script>
$(document).ready(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#jobsTable').DataTable({
processing: true,
serverSide: true,
ajax: " {{ route('activity.index') }}",
dom: "B" + /* Buttons */
"<'row'<'col-sm-12 col-md-6'l>" + /* Length changing input control */
"<'col-sm-12 col-md-6'f>>" + /* Filtering Input */
"<'row'<'col-sm-12'tr>>" + /* The Table! + Processing Display Element*/
"<'row'<'col-sm-12 col-md-5'i>" + /* Table Information Summary */
"<'col-sm-12 col-md-7'p>>" , /* Pagination Control*/
columnDefs: [
{
targets: ['0,1,2,5,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67'],
searchable: false
},
{
orderable: false,
targets: ['0,1,2,5,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67']
},
{
targets: ['18,19,20,21,22,23,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67'],
defaultContent: ""
},
],
columns:[
/* 0 */ {data: 'action', name: 'action', orderable: false, searchable: false},
/* 1 */ {data: 'id' , name: 'id' },
/* 2 */ {data: 'type' , name: 'type' },
/* 3 */ {data: 'job_no' , name: 'job_no' },
/* 4 */ {data: 'deal_no' , name: 'deal_no' },
/* 5 */ {data: 'cyc_no' , name: 'cyc_no' },
/* 6 */ {data: 'deal_name' , name: 'deal_name' },
/* 7 */ {data: 'form_type' , name: 'form_type' },
/* 8 */ {data: 'doc_srvc' , name: 'doc_srvc' },
/* 9 */ {data: 'csr_site' , name: 'csr_site' },
/* 10*/ {data: 'srvc_lvl' , name: 'srvc_lvl' },
/* 11*/ {data: 'market_cat' , name: 'market_cat' },
/* 12*/ {data: 'style' , name: 'style' },
/* 13*/ {data: 'main_rend' , name: 'main_rend' },
/* 14*/ {data: 'bucket' , name: 'bucket' },
/* 15*/ {data: null, render: (_,__,rowData)=>['typwp_pges','typalts_pges','eowp_pges','eoalts_pges','frshtyp_pges','pdf_pges','spin_pges','qc_pges'].reduce((sum, prop) => sum+Number(rowData[prop]),0)},
/* 16*/ {data: 'recieved_at', name: 'recieved_at'},
/* 17*/ {data: 'due_out', name: 'due_out'},
/* 18*/ {data: 'priority_deal', name: 'priority_deal'},
/* 19*/ {data: 'str_product', name: 'str_product'},
/* 20*/ {data: 'xbrl', name: 'xbrl'},
/* 21*/ {data: 'helpout', name: 'helpout'},
/* 22*/ {data: 'pre_desig', name: 'pre_desig'},
/* 23*/ {data: 'sales_rep', name: 'sales_rep'},
/* 24*/ {data: 'created_by', name: 'created_by'},
/* 25*/ {data: 'updated_by', name: 'updated_by'},
/* 26*/ {data: 'created_at', name: 'created_at'},
/* 27*/ {data: 'updated_at', name: 'updated_at'},
/* 28*/ {data: 'status', name: 'status'},
/* 29*/ {data: 'typwp_pges', name: 'typwp_pges'},
/* 30*/ {data: 'typalts_pges', name: 'typalts_pges'},
/* 31*/ {data: 'eowp_pges', name: 'eowp_pges'},
/* 32*/ {data: 'eoalts_pges', name: 'eoalts_pges'},
/* 33*/ {data: 'frshtyp_pges', name: 'frshtyp_pges'},
/* 34*/ {data: 'pdf_pges', name: 'pdf_pges'},
/* 35*/ {data: 'spin_pges', name: 'spin_pges'},
/* 36*/ {data: 'qc_pges', name: 'qc_pges'},
/* 37*/ {data: 'sr_pges', name: 'sr_pges'},
/* 38*/ {data: 'dc_pges', name: 'dc_pges'},
/* 39*/ {data: 'htmlqc_pges', name: 'htmlqc_pges'},
/* 40*/ {data: 'htmlfx_pges', name: 'htmlfx_pges'},
/* 41*/ {data: 'ppt_pges', name: 'ppt_pges'},
/* 42*/ {data: 'pagi_pges', name: 'pagi_pges'},
/* 43*/ {data: 'assigned', name: 'assigned'},
/* 44*/ {data: 'team', name: 'team'},
/* 45*/ {data: 'ept', name: 'ept'},
/* 46*/ {data: 'complexity', name: 'complexity'},
/* 47*/ {data: 'qat_check', name: 'qat_check'},
/* 48*/ {data: 'preflight', name: 'preflight'},
/* 49*/ {data: 'mercury', name: 'mercury'},
/* 50*/ {data: 'auto_pag', name: 'auto_pag'},
/* 51*/ {data: 'fi_audit', name: 'fi_audit'},
/* 52*/ {data: 'proper_cod', name: 'proper_cod'},
/* 53*/ {data: 'final_pfl', name: 'final_pfl'},
/* 54*/ {data: 'completed_at', name: 'completed_at'},
/* 55*/ {data: 'team_1', name: 'team_1'},
/* 56*/ {data: 'team_2', name: 'team_2'},
/* 57*/ {data: 'team_3', name: 'team_3'},
/* 58*/ {data: 'team_4', name: 'team_4'},
/* 59*/ {data: 'bl_com_typwp', name: 'bl_com_typwp'},
/* 60*/ {data: 'bl_com_typalts', name: 'bl_com_typalts'},
/* 61*/ {data: 'bl_std_typwp', name: 'bl_std_typwp'},
/* 62*/ {data: 'bl_std_typalts', name: 'bl_std_typalts'},
/* 63*/ {data: 'de_bl_com_typwp', name: 'de_bl_com_typwp'},
/* 64*/ {data: 'de_bl_com_typalts', name: 'de_bl_com_typalts'},
/* 65*/ {data: 'de_bl_std_typwp', name: 'de_bl_std_typwp'},
/* 66*/ {data: 'de_bl_std_typalts', name: 'de_bl_std_typalts'},
/* 67*/ {data: 'de_comments', name: 'de_comments'}
]
// rowGroup: {
// dataSrc: 'due_out'
// }
});
var job_id;
// Delete action
$(document).on('click', '.deleteButton', function(){
var jobcycid = $(this).attr('data-jobcycid');
job_id = $(this).attr('id');
$('#deleteModal').modal('show');
$('#jcId').html(jobcycid);
});
$('#ok_button').click(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type:'DELETE',
url:"/activity/" + job_id,
});
$.ajax({
beforeSend:function(){
$('#ok_button').text('Deleting...');
},
success:function(data)
{
setTimeout(function(){
$('#deleteModal').modal('hide');
$('#ok_button').text('Ok');
$('#jobsTable').DataTable().ajax.reload();
}, 500);
}
});
});
});
</script>
@endsection
@endsection
Controller
<?php
namespace App\Http\Controllers;
use App\Job;
use Illuminate\Http\Request;
use DataTables;
use Alert;
use App\Http\Requests\JobEntryValidation;
use Symfony\Component\Console\Input\Input;
class JobController extends Controller
{
/**
* Display a listing of the resource.
*
* @return void
*/
public function index()
{
if (request()->ajax()) {
$jobs = Job::latest()->get();
return DataTables::of($jobs)
->addColumn('action', function ($jobs) {
$button = '<div class="btn-group btn-group-xs">';
$button .= '<a href="/activity/' . $jobs->id . '/edit" class="btn btn-primary btn-xs"><i class="fa fa-edit fa-fw"></i> Edit</a>';
$button .= '<button type="button" name="deleteButton" id="' . $jobs->id . '" data-jobcycid="' . $jobs->job_no . ' | ' . $jobs->cyc_no . '" class="btn btn-danger btn-xs deleteButton"><i class="fas fa-trash-alt"></i> Delete</button>';
$button .= '</div>';
return $button;
})
->rawColumns(['action'])
->make(true);
}
return view('activity.index');
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('activity.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(JobEntryValidation $request)
{
// Create Job Entry
$job = new Job;
$job->id = $request->input('job_no') . $request->input('cyc_no');
$job->type = $request->input('type');
$job->job_no = $request->input('job_no');
$job->deal_no = $request->input('deal_no');
$job->cyc_no = $request->input('cyc_no');
$job->deal_name = $request->input('deal_name');
$job->form_type = $request->input('form_type');
$job->doc_srvc = $request->input('doc_srvc');
$job->csr_site = $request->input('csr_site');
$job->srvc_lvl = $request->input('srvc_lvl');
$job->market_cat = $request->input('market_cat');
$job->style = $request->input('style');
$job->main_rend = $request->input('main_rend');
$job->bucket = $request->input('bucket');
$job->recieved_at = $request->input('recieved_at');
$job->due_out = $request->input('due_out');
$job->priority_deal = $request->input('priority_deal');
$job->xbrl = $request->input('xbrl');
$job->helpout = $request->input('helpout');
$job->pre_desig = $request->input('pre_desig');
$job->sales_rep = $request->input('sales_rep');
$job->created_by = $request->input('created_by');
$job->updated_by = $request->input('updated_by');
$job->status = $request->input('status');
$job->typwp_pges = $request->input('typwp_pges');
$job->typalts_pges = $request->input('typalts_pges');
$job->eowp_pges = $request->input('eowp_pges');
$job->eoalts_pges = $request->input('eoalts_pges');
$job->frshtyp_pges = $request->input('frshtyp_pges');
$job->pdf_pges = $request->input('pdf_pges');
$job->spin_pges = $request->input('spin_pges');
$job->qc_pges = $request->input('qc_pges');
$job->sr_pges = $request->input('sr_pges');
$job->dc_pges = $request->input('dc_pges');
$job->htmlqc_pges = $request->input('htmlqc_pges');
$job->htmlfx_pges = $request->input('htmlfx_pges');
$job->ppt_pges = $request->input('ppt_pges');
$job->pagi_pges = $request->input('pagi_pges');
$job->save();
Alert::toast('Job Entered Successfully.', 'success');
return redirect()->route('activity.index');
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
$job = Job::find($id);
return view('activity.show', compact('job'));
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$job = Job::find($id);
return view('activity.edit', compact('job'));
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(JobEntryValidation $request, $id)
{
// Update Job Entry
$job = Job::find($id);
$job->id = $request->input('job_no') . $request->input('cyc_no');
$job->type = $request->input('type');
$job->job_no = $request->input('job_no');
$job->deal_no = $request->input('deal_no');
$job->cyc_no = $request->input('cyc_no');
$job->deal_name = $request->input('deal_name');
$job->form_type = $request->input('form_type');
$job->doc_srvc = $request->input('doc_srvc');
$job->csr_site = $request->input('csr_site');
$job->srvc_lvl = $request->input('srvc_lvl');
$job->market_cat = $request->input('market_cat');
$job->style = $request->input('style');
$job->main_rend = $request->input('main_rend');
$job->bucket = $request->input('bucket');
$job->recieved_at = $request->input('recieved_at');
$job->due_out = $request->input('due_out');
$job->priority_deal = $request->input('priority_deal');
$job->xbrl = $request->input('xbrl');
$job->helpout = $request->input('helpout');
$job->pre_desig = $request->input('pre_desig');
$job->sales_rep = $request->input('sales_rep');
$job->updated_by = $request->input('updated_by');
$job->status = $request->input('status');
$job->typwp_pges = $request->input('typwp_pges');
$job->typalts_pges = $request->input('typalts_pges');
$job->eowp_pges = $request->input('eowp_pges');
$job->eoalts_pges = $request->input('eoalts_pges');
$job->frshtyp_pges = $request->input('frshtyp_pges');
$job->pdf_pges = $request->input('pdf_pges');
$job->spin_pges = $request->input('spin_pges');
$job->qc_pges = $request->input('qc_pges');
$job->sr_pges = $request->input('sr_pges');
$job->dc_pges = $request->input('dc_pges');
$job->htmlqc_pges = $request->input('htmlqc_pges');
$job->htmlfx_pges = $request->input('htmlfx_pges');
$job->ppt_pges = $request->input('ppt_pges');
$job->pagi_pges = $request->input('pagi_pges');
$job->assigned = $request->input('assigned');
$job->team = $request->input('team');
$job->ept = $request->input('ept');
$job->complexity = $request->input('complexity');
$job->qat_check = $request->input('qat_check');
$job->preflight = $request->input('mercury');
$job->mercury = $request->input('mercury');
$job->auto_pag = $request->input('auto_pag');
$job->fi_audit = $request->input('fi_audit');
$job->proper_cod = $request->input('proper_cod');
$job->final_pfl = $request->input('final_pfl');
$job->completed_at = $request->input('completed_at');
$job->team_1 = $request->input('team_1');
$job->team_2 = $request->input('team_2');
$job->team_3 = $request->input('team_3');
$job->team_4 = $request->input('team_4');
$job->bl_com_typwp = $request->input('bl_com_typwp');
$job->bl_com_typwp = $request->input('bl_com_typalts');
$job->bl_std_typwp = $request->input('bl_std_typwp');
$job->bl_std_typalts = $request->input('bl_std_typalts');
$job->bl_com_typwp = $request->input('bl_com_typwp');
$job->de_bl_com_typwp = $request->input('de_bl_com_typwp');
$job->de_bl_com_typalts = $request->input('de_bl_com_typalts');
$job->de_comments = $request->input('de_comments');
$job->released_at = $request->input('released_at');
$job->update();
Alert::toast('Job Updated Successfully.', 'success');
return redirect()->route('activity.index');
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
Job::find($id)->delete();
}
public function jobEditCancel()
{
Alert::toast('No Information was updated.', 'info');
return redirect()->route('activity.index');
}
public function jobAddCancel()
{
Alert::toast('No Job was added to the activity.', 'info');
return redirect()->route('activity.index');
}
}
Now the table displays fine most of the time but time to time I'm getting the ajax error.
Browser Console says following errors:
Failed to load resource: the server responded with a status of 404 (Not Found)
jquery-3.4.1.min.js:2 GET http://127.0.0.1:8000/activity?draw=4&columns%regex%5D=false&_=1568133125509 404 (Not Found)
I had to remove some parts from the error message since its very long.
Also, I am unable to disable orderable or searchable option in this table.
I looked for every solution out there on the net but I was unable to find a proper solution. Any help is greatly appreciated.
Level 1
nvm. I just read that it displays sometimes so that not it.
One of the wonderful things about Laravel and something that also causes a lot of difficulty is that is JS included. So, a CDN to bootstrap could interfere with what Laravel comes prepackaged with. I don't know if this would help your situation but I almost always do php artisan preset none.
Level 1
Hi @cookie_good . Thank you for taking an interest.
Here's my routes:
/*Activity Routes*/
Route::resource('activity', 'JobController');
Route::get('/activity', 'JobController@getIndex')->name('activity.index');
Route::get('/jobEditCancel', 'JobController@jobEditCancel')->name('jobEditCancel');
Route::get('/jobAddCancel', 'JobController@jobAddCancel')->name('jobAddCancel');
Level 6
Is this a production machine or are you testing this via 'php artisan serve' server?
Level 1
Hi @dalma.. This is running on localhost. I'm using Xampp.
Level 1
Hi All, I was able to get rid of this error after removing some columns. But just when I add some integer data type columns this issue returns. Is there anything related to integer data type with datatables
Level 1
Thank you each and every one of you who have tried your best to support me to solve this problem. However, after so many searches for the answer, I have figured it out.
Apparently my URI is far too long. Due to the high number of columns. I was able to understand this after moving my development environment to laravel Homestead.
I have followed the steps on this blog to shorten the URL. And it solved all the issues:
https://yajrabox.com/blog/datatables-and-long-url
Once again thank you very much for anyone who has provided their opinion. I hope this post will be useful to someone who is trying to create data tables which have high column counts.
Please or to participate in this conversation.