I have been stuck for days on this issue. I am trying to pull data into my datatable for an inventory system using JSON data. I for some reason cannot get my In Inventory column to display the number of items left. The data is being pulled from my JSON file located at http://lungavitadesigns.com/api/inventory_list.php
The datatable is located at http://lungavitadesigns.com/inventory.php
Below is the code I am using to populate the data. Any help is highly appreciated.
$(document).ready(function() {
$('#inventory').DataTable( {
columnDefs: [
{
targets: [ 0, 1, 2 ,3,4]
}
],
"scrollY": "700px",
"scrollCollapse": true,
"paging": false,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"ajax": 'http://lungavitadesigns.com/api/inventory_list.php',
"columns": [
{
"data": "master_image.url",
"render": function ( data, type, full, meta ) {
return '<img src="'+data+'" width="100px" height="100px" />';
}
},
{"data": "name"},
{
data: 'variations.0.price_money.amount',
render: function ( data, type, row ) {
return '$'+ data;
}
},
{data: "inventory.quantity_on_hand"},
{"data": "available_online"}
],
});
} );
Your JSON response is missing inventory and inventory.quantity_on_hand properties for each row.
Related
I'm getting the following error when my page tries to load a DataTable:
DataTables warning: table id=table1 - Requested unknown parameter '0'
for row 0, column 0. For more information about this error, please see
http://datatables.net/tn/4
The table loading works fine when I use a dummy data set of random values, but the data I would like to display has many null values, and this may be why the problem arises. I would like to know how best to set the DataTable settings such that null values are recognized and displayed as an empty string.
I tried adding a render function to solve the issue (adapted from an example described in the comments on datatables oficial forum), but it's not currently working, and I'm not sure how best to implement it, or if it would be better to use another method altogether.
jQuery:
function setupData() {
$(document).ready(function () {
$('#table1').dataTable({
"dom": 'B<clear>frtip',
"buttons": [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"scrollX": true,
"scrollY": true,
"ajax": {
"url": "/index_get_data",
"dataType": "json",
"dataSrc": "data",
"contentType": "application/json"
},
responsive: true
});
});
}
$(window).on("load", setupData);
html:
<table contenteditable='true' id="table1" class="tableBody dataTable table-striped table-bordered nowrap display" style="width:100%" >
<thead>
<tr>
{% for item in cols %}
<th>{{ item }}</th>
{% endfor %}
</tr>
</thead>
</table>
A render function that I added to the dataTable declaration, but I couldn't get this to work:
"render": function jsRenderCOL(data, type, row, meta) {
var dataRender;
if (data == null) {
dataRender = "";
}
return dataRender;
}
There are over 130 columns (this can be variable), and the data is updated daily, with many columns potentially containing null data. I'd like to find a method to display the data within the dataTable where the columns don't have to be declared explicitly within the dataTable function. Thanks for any help you can provide.
You could try to set the defaultContent on initialisation for each and every column to be an empty string i.e.
$('#table1').dataTable( {
"columnDefs": [ {
"targets": (pass a variable in here that you have calculated based on the number of columns to render)
"defaultContent": ""
} ]
} );
and for the targets attribute pass in a variable that defines the indexes of the columns.
You dont have to worry about ajax data use this code
$('.dataTable').dataTable({
destroy: true,
paging: true,
searching: true,
sort: true,
"ajax": {
url: '{{ url('users/datatable')}}',
type: 'POST',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
'data':{}
},
"columns": [
{data: 'id'},
{data: 'name'},
{data: 'email'},
{data: 'membership_no'},
{data: 'is_active'},
{data: 'varsity_session'},
{data: 'due_amount'},
{data: 'paid_amount'},
{data: 'created_at'},
{data: 'last_transaction_date'},
{data: 'action'},
],
"columnDefs": [
{"bSortable": false, "targets": [1, 6]},
{"searchable": false, "targets": [4, 6]}
],
lengthMenu: [[10, 50, 100, -1], [10, 50, 100, "All"]],
pageLength: 10,
"dom": 'Blfrtip',
buttons: [
{
extend: 'copy',
text: 'copy',
className: 'btn btn-primary',
exportOptions: {
columns: 'th:not(:last-child)'
}
},
{
extend: 'csv',
text: 'csv',
className: 'btn btn-warning',
exportOptions: {
columns: 'th:not(:last-child)'
}
},
{
extend: 'excel',
text: 'excel',
className: 'btn btn-danger',
exportOptions: {
columns: 'th:not(:last-child)'
}
},
{
extend: 'pdf',
text: 'pdf',
className: 'btn btn-success',
exportOptions: {
columns: 'th:not(:last-child)'
}
},
{
extend: 'print',
text: 'print',
className: 'btn btn-btn-info',
exportOptions: {
columns: 'th:not(:last-child)'
}
}
]
});
});
Add
columnDefs:[
{"render":function(data){if(data == "null") {return "-"} else {return data}}, "targets":"_all" },
],
I'm doing the CSV export function with Datatables, but now I want to check if the file size is greater than 1MB, I won't export the file.
But I don't know how to do it, hope someone will know or have done a check on CSV file size Datatables.
This is my current code:
var otable = $table.DataTable({
"scrollX": true,
"ordering": false,
language: lg_opt,
data: data_json,
columns: [
{ title: "No", data: "No" },
{ title: "Name", data: "Name" },
{ title: "Data", data: "Data" },
],
dom: 'Bfrtip',
buttons: [
{
filename: 'Report_'+d+'_'+i,
extend: 'csv',
title: 'Report,
bom: true,
customize: function ( csv ) {
var split_csv = csv.split("\n");
split_csv.splice(0, 1);
csv = split_csv.join("\n");
return csv;
}
}
],
"bDestroy": true,
});
Thanks in advance!
I have an existing JQuery code for DataTable which lets the hidden first column be in order of Descending.
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable( {
order:[[0,"desc"]],
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
}
]
} );
} );
</script>
And I want to add this lines of codes, which I copied from DataTables.net
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
How should it be done? I tried doing this:
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable( {
order:[[0,"desc"]],
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
}
],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
</script>
But it won't work. Can someone help me correct the format?
I would like to add another relevant information to be added too. On the Print button as well as PDF button, I would like it to be in Landscape mode and with Added custom message. Like this:
extend: 'pdfFlash',
messageTop: 'PDF created by Buttons for DataTables.'
Can someone help me with this? Thank you.
You need to create array of buttons, try this way
$(document).ready(function () {
$('#dataTables-example').DataTable({
order: [[0, "desc"]],
"columnDefs": [
{
"targets": [0],
"visible": false,
"searchable": false
}
],
dom: 'Bfrtip',
buttons: [
{ extend: 'copy' },
{ extend: 'csv' },
{ extend: 'excel' },
{ extend: 'pdf', title: 'ExampleFile' },
{ extend: 'print' }
]
});
});
I am new in MVC application, I have handled the large data in Jquery datatable Server side script working fine when all data loaded(ex: Select the all Records in particular table).
If I make manual filter (ex: Select * from xxx where zzz=yyy) then I am not able to send parameters to controller action.
Please find the below script.
$(document).ready(function () {
debugger
var oTable = $('#PartUpdate').dataTable({
"bServerSide": true,
"sAjaxSource": "Test/AjaxHandler",
data: $.param({ 'b':'Mani'}),
"bProcessing": true,
buttons: [
'csv', 'excel', 'print'
],
"aoColumns": [
{
"sName": "ID",
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj) {
return 'View';
}
},
{ "sName": "UserName" },
{ "sName": "FullName" },
{ "sName": "EmailId" }
]
});
});
This is a table which display transactions, implementes using DataTables.
$( document ).ready(function() {
var table = $('#tbl_transaksi').DataTable( {
"ajax": "data_transaksi.php",
"bPaginate":true,
"bProcessing": true,
"pageLength": 10,
"columns": [
{ mData: 'username' } ,
{ mData: 'fullname' },
{ mData: 'the_date' },
{ mData: 'amount', render: function ( data, type, row ) {
return "Rp " + data;
}
}
],
"dom": 'Bfrtip',
"buttons": [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
});
It works. Now I want to add an enhancement: format the amount ("jumlah") using Indonesian format, so for example 1000000 will be displayed as "Rp 1.000.000";
A Google search pointed me to renderers. I added the render part into my code, and well it doesn't change the formatting. What is wrong here?
use $.fn.dataTable.render.number function,
$( document ).ready(function() {
var table = $('#tbl_transaksi').DataTable( {
"ajax": "data_transaksi.php",
"bPaginate":true,
"bProcessing": true,
"pageLength": 10,
"columns": [
{ mData: 'username' } ,
{ mData: 'fullname' },
{ mData: 'the_date' },
{ mData: 'amount', render: $.fn.dataTable.render.number( ',', '.', 3, 'Rp' )
}
],
"dom": 'Bfrtip',
"buttons": [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
});
Hope this thing solve your problem.
$(document).ready(function () {
var table = $('#tbl_transaksi').DataTable({
"ajax": "data_transaksi.php",
"bPaginate": true,
"bProcessing": true,
"pageLength": 10,
"columns": [
{ mData: 'username' },
{ mData: 'fullname' },
{ mData: 'the_date' },
{
mData: 'amount', render: function (data, type, row, meta) {
return meta.settings.fnFormatNumber(row.amount);
}
}
],
"dom": 'Bfrtip',
"buttons": [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
});
use it gan :
{
mData: 'amount', render: $.fn.dataTable.render.number( '.', ',', 0, 'Rp ' )
}
//result Rp 175.000
in indonesian rupiah they use dot (.) for currency not comma