DataTable adding row alert error "Requested unknown parameter" - datatable

Here is the error prompt when I try to add a new row in my DataTable.
DataTables warning: table id=table-workshops - Requested unknown
parameter 'name' for row 39, column 0. For more information about this
error, please see http://datatables.net/tn/4
HTML
<table class="table table-bordered table-striped table-hover js-basic-example" id="table-workshops">
<thead>
<tr>
<th>Workshop</th>
<th>Number</th>
<th>Category</th>
</tr>
</thead>
<tbody></tbody>
</table>
jQuery
var workshops = JSON.parse(workshops_get());
var table = $('#table-workshops');
table.DataTable({
destroy: true,
data: workshops,
pageLength: 5,
columns: [
{data: 'name',},
{data: "number",},
{data: "category",},
],
order: [[0, 'asc']]
});
$(document).on('click', '.workshop-add', function(){
table.DataTable().row.add(['test', 'test', 'test']).draw();
});
Here is my table with loaded data (fine)
Here is my table with a new row but empty
I look at the multiple answers on the web but didn't find the solution for me.
I followed the doc of the official DataTable website.
https://datatables.net/examples/api/add_row.html
Did anyone know where is the issue ?
Thank you.

The solution given by #andrewJames worked, here is the correct code :
$(document).on('click', '.workshop-add', function(){
table.DataTable().row.add( {"name":'test', "number":'test', "category":'test'} ).draw();
});
And here is the result :

Related

Ajax load data in datatables and set data on button

everything works fine. The only issue that i cannot fix/find is how to create a button and set the value of data: cvpdf inside a href of a button to open the cv
The cvpdf is the file name of a cv stored in the database.
<table id="dtBasicExample" class="table table-striped custom-table mb-0 datatable " >
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>surname</th>
<th>email</th>
<th>position</th>
<th>CV</th>
</tr>
</thead>
<tbody id="atn-tbody">
</tbody>
</table>
function showInformation(str) {
console.log(str);
$("#dtBasicExample").dataTable().fnDestroy();
$(document).ready(function(){
$("#dtBasicExample").dataTable({
scrollX: true,
"ajax":{
url: "data.php?q="+str ,
dataSrc:"",
},
"columns":[
{"data": "id"},
{"data": "name"},
{"data": "surname"},
{"data": "email"},
{"data": "position"},
{"data": "cvpdf"},
]
});
});
};
Let me help you out with this. you can apply this to any column data
columns: [
{
data: function(row){
return `Click This`
}
}
]
the "row" parameter will return the whole data for the current row, so you can access the object through the "row.your_key".
this is the best practice to make your code simpler.
the complete parameter can be accessed through This Link
Hope it can help!

Laravel - How to have two datatables in one blade view

I am a laravel beginner. I currently have a project in progressing which need to have two data tables in one page. In my past project, I only know how to make just a datatable to display ine one view page. For now, I need to have Branch Manager Table and Bus Driver Table to be displayed in one view page. For now I only know to display only one data table.
This is the view page
<table id="example1" class="table table-striped first" style="width:100%">
<thead>
<tr>
<th>Branch Manager Name</th>
<th>Contact Number</th>
<th class="col-md-2">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="example2" class="table table-striped first" style="width:100%">
<thead>
<tr>
<th>Bus Driver Name</th>
<th>Contact Number</th>
<th class="col-md-2">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This is the ajax for Branch Manager
<script type="text/javascript">
$(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $('#example1').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('branchManager.list') }}",
columns: [{
data: 'branch_manager_name',
name: 'branch_manager_name'
},
{
data: 'contact_number',
name: 'contact_number'
},
{
data: 'action',
name: 'action',
orderable: true,
searchable: true
},
]
});
});
</script>
This is controller for Branch Manager
public function branchManager(Request $request)
{
$branchManagers = BranchManager::latest()->get();
if ($request->ajax()) {
$data = BranchManager::latest()->get();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = 'Edit';
$btn = $btn.' <i class="far fa-trash-alt btn-outline-danger"></i>';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('admin.employee', compact('branchManagers'));
}
This is the route
Route::get('/employee', [BranchManagerController::class, 'branchManager'])->name('branchManager.list');
Can anyone explain to me how to make it. Like how many controllers do I need? Isit I need to create one more controller for Bus Driver ? Or two tables are just used in one controller? Besides, if it is needed to create one more controller, how the route would looks like? Thanks

Can i store database tables to a data table?

i want to store my database table in a data table is that possible?
my controller
$tablemonth = \DB::select("SHOW TABLES WHERE Tables_in_database LIKE '%Month_Report_%'");
my blade without data table
<table id="listoftable" class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>File Name</th>
</tr>
</thead>
<tbody>
#foreach($tablemonth as $table)
<tr>
<td>
{{$table->Tables_in_database}}
</td>
</tr>
#endforeach
</tbody>
</table>
Trying to achieve like this
<script>
$(function() {
var table = $('#listoftable').DataTable({
processing: false,
serverSide: true,
ajax: '{!! route('admin.get.table') !!}',
columns: [
{ data: {{tablemonth}}, name: {{$tablemonth}} },
]
});
});
</script>
Database table
I suggest looking into https://github.com/yajra/laravel-datatables, which allows to use the following result as input for the DataTables:
$data = \DB::select("SHOW TABLES WHERE Tables_in_database LIKE '%Month_Report_%'");
return Datatables::of($data)->addIndexColumn()->make(true);
Create a controller using the snippet above and consume it via the following DataTables initialization:
<script>
$(function() {
$('#listoftable').DataTable({
processing: true,
serverSide: true,
ajax: '{{ route('API-route-name') }}',
columns: [
{ data: 'Tables_in_database', name: 'Table name' }
]
});
});
</script>
See https://www.itsolutionstuff.com/post/laravel-58-datatables-tutorialexample.html for a tutorial.

Column search with filter in footer - footer filter not showing - Laravel Datatables Yajrabox

I am using Yajrabox Laravel datatables to display data. Very simple, just trying what is given in the tutorial. However, the text boxes to take input in the footer of the table is not showing up.
https://datatables.yajrabox.com/eloquent/multi-filter-select
Using the same code that is there in the page - source code.
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: 'https://datatables.yajrabox.com/eloquent/multi-filter-select-data',
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'created_at', name: 'created_at'},
{data: 'updated_at', name: 'updated_at'}
],
initComplete: function () {
this.api().columns().every(function () {
var column = this;
var input = document.createElement("input");
$(input).appendTo($(column.footer()).empty())
.on('change', function () {
column.search($(this).val(), false, false, true).draw();
});
});
}
});
The datatable shows as expected, with the columns and the data, sorting and the search feature on top of the table.
However, Footer does not show the filter box, whereas the filter box should be showing up as given in the example.
I am not sure what I am missing. If someone can point me in the right direction, it would be helpful.
Thanks #Gyrocode for pointing out about the tfoot. My table did not have the element. I had to add that and then the footer started showing up with the column filter.
Sample code is here for anyone who might have a similar problem.
<table id="users-table" class="table table-condensed">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Created At</th>
<th>Updated At</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Created At</th>
<th>Updated At</th>
</tr>
</tfoot>

Bind Vue click function on dynamically created content from jquery

First of all I am new to vuejs., currently working on a project made using Laravel. I am using Vue where ever I feel the need for it. On a certain page I am using datatable to load list of machine requests
$list = LicenceRequests::orderBy('allocated')->with('users.userDetails')->where('users_id', '!=', 1)->get();
return Datatables::of($list)
->addColumn('actions', function ($list) {
return '<button data-id="'.$list->id.'" class="btn btn-success" #click="allocateEvent">Allocate</button>';
})
->addIndexColumn()
->rawColumns(['actions'])
->make(true);
I have added a click function so that When the datatable is rendered, a Vue function can be called. In the blade template, I am using the following html code :
<div id="content" class="content">
<div class="block">
<div class="block-content">
<table class="table table-bordered table-striped " id="requestList">
<thead>
<tr>
<th>Sr. No</th>
<th class="hidden-xs" >Name</th>
<th class="hidden-xs" >Email</th>
<th class="hidden-xs" >Requests</th>
<th class="hidden-xs" >Allocated</th>
<th class="hidden-xs" >Date requested</th>
<th class="hidden-xs" >Machine address</th>
<th class="text-center">Actions</th>
</tr>
</thead>
</table>
</div>
</div>
</div>?
For the datatable, I am calling it on the page load function as follows :
$(function (){
$('#requestList').dataTable({
processing: false,
serverSide: true,
ajax: '{!! route('admin.getLicenceRequests') !!}',
columns: [
{data: 'DT_Row_Index', orderable: false, searchable: false},
{ data: 'users.user_details.name', name: 'name' },
{ data: 'users.email', name: 'email' },
{ data: 'number', name: 'number' },
{ data: 'allocated', name: 'allocated' },
{ data: 'request_generated_on', name: 'request_generated_on' },
{ data: 'machine_address', name: 'machine_address' },
{ data: 'actions', name: 'actions',orderable: false, searchable: false }
],
lengthMenu: [[ 10, 15, 20], [ 10, 15, 20]]
});
});
I am initializing Vue on the same page
var vm = new Vue({
el: '#content',
methods: {
allocateEvent: function() {
console.log("hello");
}
}
})
The problem is that the function is not called when I press the button on the rendered html of datatable. If I bind the function to any otehr element fn the page it will work. Is there something I am missing or some Vue related code that I am not adding?
P.S I know this is not how Vue should be used with laravel blade. I just wanted to know why the above code is not working when it should.
Thanks
I don't think you can create a binding with dynamically rendered content like this. The problem is the vue application is created first and the content with the #click binding is rendered afterwards.
Here is a comment by Evan Yu regarding dynamic content:
https://forum-archive.vuejs.org/topic/151/vue-js-not-listening-to-dynamically-created-elements
It's suggested to use $compile(html) and appendChild when working with dynamic content.

Resources