I have used ignited datable to integrate it in codeigniter but getting following error : DataTables warning: table id=example2 - Requested unknown parameter '0' for row 0.
$(document).ready(function() {
$('#example2').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "POST",
"sAjaxSource": "<?php echo base_url()?>auth/datatable"
} );
} );
Here is my html
<table id="example2" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
here is the json generated
{"draw":0,"recordsTotal":2,"recordsFiltered":2,"data":[{"email":"admin#admin.com","first_name":"Admin","last_name":"istrator"},{"email":"subhadeepgayen#gmail.com","first_name":"Subhadeep","last_name":"Gayen"}]}
can seem to find any solution :(
Hello you need only specify the columns
"columns": [
{ "data": "id" },
{ "data": "name" }
]
Have you tried this - http://ellislab.com/forums/viewthread/160896/
And also this - http://www.ahmed-samy.com/php-codeigniter-full-featrued-jquery-datatables-part-1/
Do let me know if you succeed.
Best
Related
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!
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
I'm using datatables and bootstrap for pagination but its not working.
The data is received via ajax ,as soon as i press any header to sort the table, the data dissappears.
The html for table itself
<table id="tablePersonnel"
class="table table-striped table-bordered table-sm" cellspacing="0"
width="100%">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>First Name</th>
<th>Phone number</th>
<th>Status</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>#</th>
<th>Name</th>
<th>First Name</th>
<th>Phone number</th>
<th>Status</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</tfoot>
</table>
here is the javascript for the function responsible for getting the data
refreshTable = function() {
$
.ajax({
url : "listPersonnel",
dataType : 'json',
success : function(response) {
data = response;
var no = 1;
for (i = 0; i < data.length; i++) {
$("#tablePersonnel")
.append(
'<tr> <td>'
+ data[i].id
+ '</td> <td>'
+ data[i].firstname
+ '</td> <td>'
+ data[i].name
+ '</td> <td>'
+ data[i].phone
+ '</td> <td>'
+ data[i].status
+ '</td><td><input type="button" class="btn1" onclick="openEditPopup('
+ i
+ ')" value="Edit"></input></td> <td> <button type="submit" class="btn" onclick="openDeletePopup('
+ i
+ ');" value=""><i class="fa fa-trash"></i></button></td> </tr>');
no = no + 1;
}
}
});
}
Any help is greatly appreciated.
Your approach involves adding data to the HTML table (i.e. to the DOM). However, the DataTables object does not know about this data - which is why the data disappears whenever you perform any action which involves a DataTables refresh. DataTables is showing you its data - which is no data.
Instead, you can perform your ajax call from within DataTables itself - and then DataTables will handle the data for you.
I will assume the JSON returned by your ajax call has the following structure:
[
{
"id": 123,
"firstname": "Tom",
"name": "Smith",
"phone": "121-212-1212",
"status": "foo"
},
{
"id": 123,
"firstname": "Jane",
"name": "Jones",
"phone": "434-545=6767",
"status": "bar"
}
]
In that case, you can use the following table HTML:
<table id="example">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Name</th>
<th>Phone</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
</table>
And your DataTable configuration will be this:
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
"ajax": {
"url": "listPersonnel",
"dataSrc": ''
},
"columns": [
{ "data": "id" },
{ "data": "firstname" },
{ "data": "name" },
{ "data": "phone" },
{ "data": "status" },
{ "data": function ( row, type, val, meta ) {
var content = '<input type="button" class="btn1" onclick="openEditPopup('
+ row.id
+ ')" value="Edit"></input></td> <td> <button type="submit" class="btn" onclick="openDeletePopup('
+ row.id
+ ');" value=""><i class="fa fa-trash">trash</i></button>'
return content;
} }
]
} );
} );
</script>
The result looks like this (I don't have your trash icon):
Points to note:
There is no iteration logic here - it's handled for you by DataTables, as it consumes your JSON response.
If your JSON has a different structure, you will need to adjust the above. Examples of different approaches are shown here.
In your case, we use dataSrc = '' because your JSON is an array of objects - and it does not have a container object.
The data in the final column is generated via a function which builds the string you need.
You can define column headings directly in DataTable also, instead of in the HTML.
There are many variations on this approach - DataTables has a lot of flexibility.
I want to filter the data and managed to do it. However, when I clicked filter, my datatable headers are missing but I couldnt figure out what the problem is.
My blade is:
<table id="table_data" class=" table-responsive table-striped table-hover table-bordered ">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
</tr>
</thead>
</table>
Filter function:
$('#filter').click(function(){
var table = $('#table_data').DataTable();
var name= $('#name').val();
var age= $('#age').val();
var gender= $('#gender').val();
if( $.fn.DataTable.isDataTable('#table_data')){
table.destroy();
$('#table_data').empty();
var dataTable = $('#table_data').DataTable({
processing: false,
serverSide: false,
ajax:{
url:'/filter-result',
data:{name:name, age:age,gender:gender}
},
columns: [
{
data:'id',
name:'id'
},
{
data:'First_name',
name:'First_name'
},
{
data:'Last_name',
name:'Last_name'
}
]
});
}
});
What is the reasons the header missing after clicked?
I am working on Laravel Datatables using Yajra .
I am trying to populate the table by passing the array value.
My table structure is as follows:
<table id="daily_datatable" class="table table-striped table-bordered">
<thead>
<tr>
<th rowspan="2">Region</th>
<th rowspan="2">Country</th>
<th rowspan="2">No of accounts</th>
<th rowspan="2">Bank Account Pending</th>
</tr>
</thead>
My jquery call is as follows:
$('#daily_datatable').DataTable({
processing:true,
serverSide:true,
rowReorder: true,
ajax:
{
url:"{!! URL::to('dailyreportDatatable') !!}"
},
dom: 'Bfrtip',
buttons: ['pageLength','csv','excel', 'pdf'],
columns:[
{data:'region',name:'region'},
{data:'country',name:'country'},
{data:'noofaccounts',name:'noofaccounts'},
{data:'accountpending',name:'accountpending'},
]
});
My controller method is as follows:
public function dailydatatable(){
$final = new Collection;
$from_date = date("Y-m-d");
$to_date = date("Y-m-d");
$pastfrom_date = date("Y-m-d", strtotime("-2 days"));
$pastto_date = date("Y-m-d", strtotime("-2 days"));
$country = AccMaster::select('ms_region','ms_country','ms_bacc_num')->groupby('ms_country')->get()->toArray();
foreach($country as $countryCode){
$pending = AccMaster::select('ms_bacc_num')->where('ms_country',$countryCode['ms_country'])->get()->toArray();
$bankacc = $this->getBankAcc($pending);
$final->push([
'region'=>$countryCode['ms_region'],
'country'=>$countryCode['ms_country'],
'noofaccounts'=>$this->getAccounts($countryCode['ms_country']),
'accountpending'=>$this->getAccPending($countryCode['ms_country'],$bankacc),
]);
}
return Datatables::of($final)->make(true);
}
I am not able to draw the datatable. I get the error
jquery.dataTables.min.js:31 Uncaught TypeError: Cannot set property
'0' of undefined
you need to rewrite your html table because you forget end tr tag
<table id="daily_datatable" class="table table-striped table-bordered">
<thead>
<tr>
<th rowspan="2">Region</th>
<th rowspan="2">Country</th>
<th rowspan="2">No of accounts</th>
<th rowspan="2">Bank Account Pending</th>
</tr>
</thead>