Laravel Datatable displayed in JSON format - php

i have to show the data in a form of datatable i use YajraBox Laravel Datatable to do that but it displayed in JSON format
/*Route code*/
Route::get('/editing','TlController#modif')->name('modif');
/*the Controller code*/
public function modif(){
return DataTables::of(Weekends::query())->make(true);
}
/*View code*/
#extends('layouts.master')
#section('containers')
<table class="table table-bordered" id="weekends-table">
<thead>
<tr>
<th>idm</th>
<th>fday</th>
<th>sday</th>
<th>id</th>
<th>updated_at</th>
<th>created_at</th>
</tr>
</thead>
<script>
$( document ).ready(function() {
$('#weekends-table').DataTable({
processing: true,
serverSide: true,
ajax: '{!! route('modif') !!}',
columns: [
{ data: 'idm', name: 'id' },
{ data: 'fday', name: 'first day of weekend' },
{ data: 'sday', name: 'second day of weekend' },
{ data: 'created_at', name: 'created_at' },
{ data: 'updated_at', name: 'updated_at' }
]
});
});
</script>
#endsection
this is how it represents the data:
https://i.imgur.com/ACjPm5a.png

As first commentor said, try to add this after <thead> if it will work, also don't forget the closing </table> tag:
<tbody>
<tr>
<td colspan="6">No data.</td>
</tr>
</tbody>

<tr>
<th>idm</th>
<th>fday</th>
<th>sday</th>
<th>updated_at</th>
<th>created_at</th>
</tr>
There are 5 parameters in your js and you have 6 parameters in .
You should have exact amount of parameters passed in your js and inside tag of your table. :)

Related

Hide the action column in Yajra datatables using gates

I'm pretty new to Laravel. I want to hide the Action column of the Yajra Datatable for specific users using Gates based on their roles.
I have been able to hide the buttons in the controller, but I want to hide the entire action column in the blade file so the users will not see it at all.
I have tried this
Jquery Codes
var table = $('.cdata-tables').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('clients.index') }}",
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'name', name: 'name'},
{data: 'location', name: 'location'},
{data: 'description', name: 'description'},
{data: 'testimonial', name: 'testimonial'},
#can('view-actions'){data: 'action', name: 'action', orderable: false, searchable: false}#endcan,
],
columnDefs: [
{
render: function (data, type, full, meta) {
return "<div class='text-wrap width-200'>" + data + "</div>";
},
targets: [3]
}
]
});
HTML Codes
<table class="table table-striped table-bordered responsive cdata-tables" style="width:100%">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Location</th>
<th>Description</th>
<th>Testimonial</th>
#can('view-actions')
<th width="100px">Action</th>
#endcan
</tr>
</thead>
<tfoot>
<tr>
<th>No</th>
<th>Name</th>
<th>Location</th>
<th>Description</th>
<th>Testimonial</th>
#can('view-actions')
<th width="100px">Action</th>
#endcan
</tr>
</tfoot>
</table>
Controller codes
public function index(Request $request)
{
if ($request->ajax()) {
$data = Client::latest()->get();
$this->user = Auth::user();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = '';
if ($this->user->can('view-actions')){
$btn = '<i class="p-1 zmdi zmdi-edit"></i>';
$btn = $btn.' <i class="p-1 zmdi zmdi-delete"></i>';
};
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('admin.pages.client');
}
I just keep getting "Processing..." when I load the file on the browser on the Datatable. Please help out.

Datatable sorting not working properly after destroyed the table and recreate

I using Jquery to clear the table tbody and reinsert in via ajax call. after the data is showed, but the sorting function is not working properly. here is my codes..
<table class="table table-bordered table-striped table-condensed flip-content table-hover" style="table-layout:fixed;" id="datatable1">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody id="agtBody">
<?php
foreach($results as $result) :
?>
<tr>
<?php if(isset($game_name['gpname'])){?>
<td><?=$game_name['gpname']?></td>
<?php }else{ ?>
<td><?=$result['gpid']?></td>
<?php } ?>
<td style="text-align:right;"><?=Helper::money($result['betAmt'])?></td>
<td style="text-align:right;"><?=Helper::money($result['payout'])?></td>
<td style="text-align:right;"><?=Helper::money($result['winLoss'])?></td>
<td style="text-align:right;"><?=Helper::money($result['validbetamount'])?></td>
</tr>
<?php endforeach; ?>
</tbody>
<tfoot id ="agtFoot">
<tr style="background-color:#FFEEDD;">
<td>Total</td>
<td style="text-align:right;"><?=Helper::money($totalbetAmt)?></td>
<td style="text-align:right;"><?=Helper::money($totalpayout)?></td>
<td style="text-align:right;"><?=Helper::money($totalwinLoss)?></td>
<td style="text-align:right;"><?=Helper::money($totalvalidbetamount)?></td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
function search_agtdetail(agentcode) {
if($("#agt_StartTime").val() == "" || $("#agt_EndTime").val() == "") {
alert("<?php echo 'Not Valid' ?>");
} else {
$("#agtBody").empty();
$("#agtFoot").empty();
$.ajax({
type: "post",
url: "/report/agentBoxAjax",
dataType: "json",
data: {
start_date: $("#agt_StartTime").val(),
end_date: $("#agt_EndTime").val(),
agent_code : agentcode,
},
success: function (data) {
$('#datatable1').dataTable().fnDestroy();
$('#agtBody').html(data.html);
$('#agtFoot').html(data.html_foot);
$('#datatable1').css('width', '');
$('#datatable1').dataTable({
'bPaginate':false,
'bSort': true,
});
}
});
}
}
$(document).ready(function(){
$('#datatable1').dataTable({
'bPaginate':false,
'bSort': true,
});
});
</script>
Can someone help me? The sorting is not working properly..
Its look like using the old data for sorting it.
i had less experience on jquery, someone please help. Thank you so much.
Extending on Bhushan Kawadkar comment you need to use the API method for this.Also you should be using the ajax methods for your datatable.
For example, lets say that i get the server side data from a script called data.php, i would just call it like this:
$('#datatable1').dataTable({
'bPaginate':false,
'bSort': true,
"ajax": {
"url": "data.php",
"type": "GET"
}
});
the post.php needs to return the data in json format like this (using car as example):
{
"data":[
[
"Ford",
"Fiesta",
"2015"
],
]
}
in your success section in the ajax call instead of destroying the table just use:
$('#datatable1').ajax.reload()
Here's a snippet just in case.
$(document).ready(function() {
var table = $('#example').DataTable({
"ajax": 'https://raw.githubusercontent.com/DataTables/DataTables/master/examples/ajax/data/arrays.txt',
});
$("#reload_table").on("click",function(){
console.log("reloading data");
table.ajax.reload();
});
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<html>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Profession</th>
<th>City</th>
<th>Date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</body>
<input id="reload_table" type="button" value="RELOAD TABLE">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</html>

DataTable that fires onclick not drawing data that is in the ajax response

I have a DataTable that retrieves the data for the table on an onclick event.
It is working how intended, I can see the response firing in the background, and there is data in the response - however, it's not being loaded into the table.
.draw();
Appears to be the issue... had a look on the forum, tried solutions i can find but nothing seems to be working...
JS below.
var myTable = jQuery('.js-dataTable').DataTable({
dom: 'Bfrtip',
pagingType: "full_numbers",
columnDefs: [
{ orderable: false }
],
buttons: [],
searching: false,
pageLength: 12,
autoWidth: false,
info: false,
paging: false,
columns: [
{"data": "ReturnedData"},
{"data": "ReturnedData"},
{"data": "ReturnedData"},
{"data": "ReturnedData"},
{"data": "ReturnedData"}
],
rowCallback: function (row, data) {},
filter: false,
processing: true,
retrieve: true
});
$("#expand").on("click", function (event) {
$.ajax({
url: 'inc/ajax/tables/cash/get-data.php',
type: "post",
data: { account: '123456' }
}).done(function (result) {
myTable.clear().draw();
myTable.rows.add(result).draw();
});
});
EDIT TO ADD HTML:
<button id="expand" type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"></button>
<table class="table table-bordered table-striped table-vcenter js-dataTable">
<thead>
<tr>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
</tr>
</thead>
</table>
EDIT 2:
data: Array(4)
0: {ReturnedData1: "Data", ReturnedData2: "Data", ReturnedData3: "Data", ReturnedData4: "Data", ReturnedData5: "Data"}
1: {ReturnedData1: "Data", ReturnedData2: "Data", ReturnedData3: "Data", ReturnedData4: "Data", ReturnedData5: "Data"}
2: {ReturnedData1: "Data", ReturnedData2: "Data", ReturnedData3: "Data", ReturnedData4: "Data", ReturnedData5: "Data"}
3: {ReturnedData1: "Data", ReturnedData2: "Data", ReturnedData3: "Data", ReturnedData4: "Data", ReturnedData5: "Data"}
length: 4
__proto__: Array(0)
__proto__: Object
Your issue is probably coming from the columns.data option.
When you specify "data": "ReturnedData" for a column, the datatable will search the content to display in result[x].ReturnedData, and as you haven't this key in your data (you have only result[x].ReturnedDataX keys), it displays nothing.
var myTable = jQuery('.js-dataTable').DataTable({
dom: 'Bfrtip',
pagingType: "full_numbers",
columnDefs: [
{ orderable: false }
],
buttons: [],
searching: false,
pageLength: 12,
autoWidth: false,
info: false,
paging: false,
columns: [
{"data": "ReturnedData"},
{"data": "ReturnedData"},
{"data": "ReturnedData"},
{"data": "ReturnedData"},
{"data": "ReturnedData"}
],
rowCallback: function (row, data) {},
filter: false,
processing: true,
retrieve: true
});
$("#expand").on("click", function (event) {
const result = dataFromAjax();
// Call ".draw()" once for performance.
myTable.clear();
myTable.rows.add(result).draw();
});
// Simulate ajax call
function dataFromAjax() {
return [
{ ReturnedData: 'After' },
{ ReturnedData: 'After 2' }
];
}
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<button id="expand" type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle">Expand</button>
<table class="table table-bordered table-striped table-vcenter js-dataTable">
<thead>
<tr>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th>Title</th>
</tr>
</thead>
<!-- testing purpose -->
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>

DataTables row.add() not working Ajax Server side

I'm working on adding a new row in my datatable on button click. Here's my code:
HTML:
<table id="datatable-batches" class="table table-striped table-bordered forex-datatable">
<thead>
<tr>
<th>Batch #</th>
<th>Qty</th>
<th>Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Batch #</th>
<th>Qty</th>
<th>Date</th>
</tr>
</tfoot>
</table>
Script:
<script type="text/javascript">
var table;
$(document).ready(function() {
//datatables
var batches_table = $('#datatable-batches').DataTable({
"processing": true, //Feature control the processing indicator.
"serverSide": true, //Feature control DataTables' server-side processing mode.
"order": [], //Initial no order.
"ajax": {
"url": "<?php echo site_url('oss/admin/ajax_batches'); ?>",
"type": "POST",
data: {
'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>'
},
dataSrc: function ( json ) {
if(json.csrf_token !== undefined) $('meta[name=csrf_token]').attr("content", json.csrf_token);
return json.data;
}
}
});
$(function() {
$('#new-batch').on('click', function(){
$('#receiving-box').css('display', 'block');
batches_table.row.add( ["3", "5", "2017-06-24 08:55:41"] ).draw();
});
});
});
</script>
Both are in the same file. When I hit the button, only the 'draw' number is increased but the data is still the same.
I also copied and pasted the example table here to make sure row.add() is working. Here's the debugger data for additional info.
Any help is highly appreciated. Thanks!

Datatables not loading

I am trying to using datatables Jquery plugin in codeingiter but its not working please help me to debug
Heres my controller where I am calling my view:
public function show_all_merchants()
{
$data["query"]= $this->details_model->get_mids();
$this->load->view('show_merchants_view',$data);
}
Heres my view:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function()
{
$('#example').dataTable
({
'bProcessing' : true,
'bServerSide' : true,
'sAjaxSource' : 'show_merchant_details',
'iDisplayStart' : 0,
'fnServerData': function(sSource, aoData, fnCallback)
{
$.ajax
({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback,
'cache' : false
});
}
});
});
</script>
<table cellpadding="0" cellspacing="0" border="0" id="example">
<thead>
<tr>
<th width="20%">ID</th>
<th width="25%">First Name</th>
<th width="15%">Last Name</th>
<th width="25%">Email</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">Loading data from server</td>
</tr>
</tbody>
</table>
and heres my controller where I am loading the data Here I am loading data tables library:
function show_merchant_details()
{
$this->datatables
->select('mid, merchant_name, merchant_link,merchant_contact')
->from('merchants')
->add_column('edit', 'Edit', 'id')
->add_column('delete', 'Delete', 'id');
echo $this->datatables->generate();
}
Friends show_merchant_details() is wrking properly as i am able to see the output
In the view page I am able to see it like Loading data from server ...... (dats it)

Categories