I need to load a datatable from an AJAX source. My PHP script returns a JSON output in this form:
{
"SiteID": "61",
"SiteRef": "MI Swaco, Pocra Quay (Elect 910)",
"SupplierID": "1",
"StartDate": "2013-06-01 00:00:00.000",
"EndDate": "2014-05-31 00:00:00.000",
"Voltage": "LV"
},
{
"SiteID": "8",
"SiteRef": "UK Training Centre, (Elect 318)",
"SupplierID": "1",
"StartDate": "2013-07-01 00:00:00.000",
"EndDate": "2014-06-30 00:00:00.000",
"Voltage": "LV"
},
{
"SiteID": "115",
"SiteRef": "Smith Int, Bruce Fac (Gas 102)",
"SupplierID": "31",
"StartDate": "2013-08-01 00:00:00.000",
"EndDate": "2014-07-30 00:00:00.000",
"Voltage": "LV"
}
I have validated it via JSONLint and it says it is a valid JSON output. However when I use it for datatable it says invalid json output. This is how I am interfacing it with dataTable:
$(function() {
//$('#termTable').dataTable().makeEditable();
$('#termTable').dataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "terminateContractList.php"
},
"columns": [
{"data": "SiteID"},
{"data": "SiteRef"},
{"data": "SupplierID"},
{"data": "StartDate"},
{"data": "EndDate"},
{"data": "Volatage"}
]
});
});
Please correct the spelling of Voltage in your code.
$( function(){
//$('#termTable').dataTable().makeEditable();
$('#termTable').dataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "terminateContractList.php"
},
"columns": [
{ "data": "SiteID" },
{ "data": "SiteRef" },
{ "data": "SupplierID" },
{ "data": "StartDate" },
{ "data": "EndDate" },
{ "data": "Voltage" }
]
} );
});
"Voltage" in the JSON data won't match the "Volatage" column in your dataTable
Related
I have a DataTable where i return my model. Inside this datatable i would like to get a column that shows a sub relationship and i can filter on that.
Example: Funds Have Member and Member has Cards
I add a column that i made myselh:
FundDataTable.php
->addColumn('cards.date', function(Fund $funds) {
if(count($funds->member->cards()->get())){
return $funds->member->cards()->first()->date;
}else{
return "None";
}
})
public function query(Fund $model)
{
return $model->newQuery()->with('member')->with('fr_status')->with('fr_payment_term')->with('member.cards');
}
protected function getColumns()
{
return [
Column::make('id'),
Column::make('member_id'),
Column::make('lastname'),
Column::make('begin_date'),
Column::make('fr_payment_term.payment_term'),
Column::make('destination'),
Column::make('cards.date'),
Column::make('fr_status.status'),
Column::computed('action')
->exportable(false)
->printable(false)
->addClass('text-center'),
];
}
index.blade.php
columns":[
{
"data": "id",
"name": "id",
"title": "Id",
"orderable": true,
"searchable": true
}, {
"data": "member_id",
"name": "member_id",
"title": "Member Id",
"orderable": true,
"searchable": true
}, {
"data": "lastname",
"name": "member.lastname",
"title": "Last name",
"orderable": true,
"searchable": true
}, {
"data": "begin_date",
"name": "begin_date",
"title": "Begin Date",
"orderable": true,
"searchable": true
}, {
"data": "fr_payment_term.payment_term",
"name": "payment_term",
"title": "Payment Term",
"orderable": true,
"searchable": true
}, {
"data": "destination",
"name": "member.destination",
"title": "Destination",
"orderable": true,
"searchable": true
},{
"data": "cards.date",
"name": "date",
"title": "Cards",
"orderable": true,
"searchable": true
}, {
"data": "fr_status.status",
"name": "status",
"title": "Status",
"orderable": true,
"searchable": true
}, {
"data": "action",
"name": "action",
"title": "Action",
"orderable": false,
"searchable": false,
"className": "text-center"
}
FundController.php
public function index(FundDataTable $dataTable)
{
session(['title' => 'Overview Funds']);
$statusses = ModelOption::where(['model' => 'Fund', 'name' => 'status'])->get();
$paymentTerms = ModelOption::where('model', 'PaymentTerm')->where( 'name','<>', 'status')->get();
$packages = Package::all();
return $dataTable->render('funds.index',[ 'statusses' => $statusses, 'packages' => $packages, 'paymentTerms' => $paymentTerms]);
}
Problem is when I filter on the searchbox for None. it does not work and shows everything.
After passing json_encode variable, not able to loading "sProcessing" text before loading data. I am trying to load more than 50000 records.
Javascript Code
<script>
var data = <?php echo json_encode($data); ?>;
$(document).ready(function() {
$('#datatable').dataTable({
"aaData": data,
"bProcessing": true,
"aoColumns": [
{ "data": "submissions_dt" },
{ "data": "pettycash_dt" },
{ "data": "type" },
{ "data": "description" },
{ "data": "voucher_no" },
{ "data": "amount", className: "right" }
],
"oLanguage": {
"sProcessing": "Fetching Data, Please wait..."
},
order: [[2, 'desc']],
"lengthMenu": [[50, 100, -1], [50, 100, "All"]],
"columnDefs": [
{ "orderable": false, "targets": [0,1,2,3,4,5] },
{"targets": [ 2 ], "visible": false }
]
});
});
</script>
[
{ "Startdate": "2016-03-07T11:00:00+00:00", "Enddate": "2016-03-11T11:00:00+00:00" },
{ "Startdate": "2016-04-11T11:30:00+00:00", "Enddate": "2016-04-15T11:30:00+00:00" },
{ "Startdate": "2016-05-07T11:30:00+00:00", "Enddate": "2016-05-21T11:30:00+00:00" },
{ "Startdate": "2016-06-18T12:00:00+00:00", "Enddate": "2016-07-02T12:00:00+00:00" },
{ "Startdate": "2016-08-20T02:00:00+00:00", "Enddate": "2016-09-03T02:00:00+00:00" },
{ "Startdate": "2016-04-16T14:30:00+00:00", "Enddate": "2016-04-23T14:30:00+00:00" },
{ "price": "₹12,500.00" },
{ "price": "₹12,500.00" },
{ "price": "₹12,500.00" },
{ "price": "₹12,500.00" },
{ "price": "₹12,500.00" },
{ "price": "₹8,100.00" }
]
I want Output like this
Startdate : 2016-06-18T12:00:00+00:00, Enddate : 2016-09-03T02:00:00+00:00 Price :\u20b912,500.00
Startdate : 2016-06-17T12:00:00+00:00, Enddate : 2016-09-03T02:00:00+00:00 Price :\u20b912,500.00
To parse json data in php, use json_decode. What you have is not a valid json however. Once you parse, you can iterate using a foreach.
I have googled for the answer of this question but noone helped.
I am getting error mentioned in title.
Here is my ajax code :
var table = $('#example').DataTable( {
"ajax": "<?php echo $root; ?>ajax/order.php",
"processing": true,
"serverSide": true,
"ordering": false,
"searching": true,
"columns": [
{ "data": "order_no" },
{ "data": "country" },
{ "data": "name" },
{ "data": "date","className": "align-center" },
{ "data": "subtotal","className": "align-right" },
{ "data": "dileveryAmt","className": "align-right" },
{ "data": "totalAmt","className": "align-right" },
{ "data": "paymentMode","className": "align-center" },
{ "data": "payment","className": "align-center" },
{ "data": null,"defaultContent": "<button id='view' class='btn btn-small btn-info'>View</button><button id='delete' class='btn btn-small btn-danger'>Delete</button>","className": "align-center" }
]
} )
I validated Response from server ( as seen in Developer tools) and its being shown as Valid JSON. But its not reflected in page.
My HTML Code is
<table id="example" class="display table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order No</th>
<th>Country</th>
<th>Customer</th>
<th>Date</th>
<th>Sub Total</th>
<th>Delivery Charge</th>
<th>Total</th>
<th>Payment Mode</th>
<th>Payment</th>
<th>Action</th>
</tr>
</thead>
UPDATE
Response from Server(there are plenty of entries. I am showing one as example):
"data": [
{
"id": "183",
"customer_id": "183",
"subtotal": "0.00",
"totalAmt": "0.00",
"dileveryAmt": "0.00",
"date": "18/02/2015",
"midnightdelivery": "0",
"delivery_date": "2015-02-19",
"message_on_cake": "",
"special_instruction": "",
"payment": "<div class='label label-warning'>Pending</div>",
"delivery": "0",
"created": "2015-02-18 10:58:29",
"ip": "",
"payment_mode": "",
"first_name": "Ganesh",
"last_name": "Salunkhe",
"email": "g#s.com",
"address": "",
"flat_no": "k",
"building_name": "k",
"street": "k",
"area": "k",
"landmark": "k",
"city": "mumbai",
"country": "India",
"state": "maharashtra",
"contact_no": "7666902899",
"name": "Ganesh Salunkhe",
"order_no": "1181"
},
Any help will be appreciated.
I struggled with this. and after I RTM here https://www.datatables.net/examples/ajax/custom_data_flat.html I figured it out.
ajax: {
url: "data/objects_root_array.txt", <-- notice url and the link
dataSrc: "" <-- if you are just going to json_encode the result from the db. it will handle a flat string
}
ajax calls are done a certain way. not just ajax. but you need to include the url and dataSrc variables in there. After I did that with my code everything worked as it should.
See if this works for you.
var table = $('#example').DataTable( {
"ajax": {
url: "<?php echo $root; ?>ajax/order.php",
dataSrc : ""
},
"processing": true,
"serverSide": true,
"ordering": false,
"searching": true,
"columns": [
{ "data": "order_no" },
{ "data": "country" },
{ "data": "name" },
{ "data": "date","className": "align-center" },
{ "data": "subtotal","className": "align-right" },
{ "data": "dileveryAmt","className": "align-right" },
{ "data": "totalAmt","className": "align-right" },
{ "data": "paymentMode","className": "align-center" },
{ "data": "payment","className": "align-center" },
{ "data": null,"defaultContent": "<button id='view' class='btn btn-small btn-info'>View</button><button id='delete' class='btn btn-small btn-danger'>Delete</button>","className": "align-center" }
]
} )
Think the problem is paymentMode. It is written without underscore in the table definition and with underscore in your json ("payment_mode":)
The answer should look like this:
{
"data": [
{
"id": "183",
"customer_id": "183",
"subtotal": "0.00",
"totalAmt": "0.00",
"dileveryAmt": "0.00",
"date": "18/02/2015",
"midnightdelivery": "0",
"delivery_date": "2015-02-19",
"message_on_cake": "",
"special_instruction": "",
"payment": "<div class='label label-warning'>Pending</div>",
"delivery": "0",
"created": "2015-02-18 10:58:29",
"ip": "",
"payment_mode": "",
"first_name": "Ganesh",
"last_name": "Salunkhe",
"email": "g#s.com",
"address": "",
"flat_no": "k",
"building_name": "k",
"street": "k",
"area": "k",
"landmark": "k",
"city": "mumbai",
"country": "India",
"state": "maharashtra",
"contact_no": "7666902899",
"name": "Ganesh Salunkhe",
"order_no": "1181"
}
]
}
Look at here: http://json.parser.online.fr/
below is my json object result of google api now i want to get url of cover from it which is parameter 'thumbnail' in below json object,but i dont know how can i retrive it can anyone here help me out?
{
"kind": "books#volumes",
"totalItems": 1,
"items": [
{
"kind": "books#volume",
"id": "9VKCkifBlisC",
"etag": "hhhZjjV6arI",
"selfLink": "url",
"volumeInfo": {
"title": "Instructor's manual to accompany An introduction",
"authors": [
"Jean-Paul Tremblay",
"P. G. Sorenson"
],
"publishedDate": "1976",
"industryIdentifiers": [
{
"type": "ISBN_10",
"identifier": "0070651515"
},
{
"type": "ISBN_13",
"identifier": "9780070651517"
}
],
"pageCount": 278,
"printType": "BOOK",
"categories": [
"Computers"
],
"averageRating": 5.0,
"ratingsCount": 1,
"contentVersion": "0.0.1.0.preview.0",
"imageLinks": {
"smallThumbnail": "url",
/*this is what i need*/
"thumbnail": "url"
},
"language": "en",
"previewLink": "url",
"infoLink": "url",
"canonicalVolumeLink": "url"
},
"saleInfo": {
"country": "IN",
"saleability": "NOT_FOR_SALE",
"isEbook": false
},
"accessInfo": {
"country": "IN",
"viewability": "NO_PAGES",
"embeddable": false,
"publicDomain": false,
"textToSpeechPermission": "ALLOWED",
"epub": {
"isAvailable": false
},
"pdf": {
"isAvailable": false
},
"webReaderLink": "url",
"accessViewStatus": "NONE",
"quoteSharingAllowed": false
}
}
]
}
You could do like this..
$arr = json_decode($json,true);
echo $arr['items'][0]['volumeInfo']['imageLinks']['thumbnail'];
Demo