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
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 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" }
]
});
});
I'am using asp.net mvc. when datatable list, send action and response only paging data. if click to print button, I want to all data print.
var table = $('#dataTableNoticeReport');
var oTable = table.dataTable({
"bScrollCollapse": true,
"bDestroy": true,
"paging": true,
"ordering": false,
"info": true,
"bFilter": true,
"bProcessing": true,
"bLengthChange": true,
"bServerSide": true,
"sAjaxSource": "/Manage/Notice/_NoticeDatatable?readStatus=" + $(this).val() + "¬iceId=" + $("#NoticeSearch_Id").val(),
"sServerMethod": "POST",
"aoColumns": [{
"mDataProp": "Name"
}, {
"mDataProp": "SurName"
}, {
"mDataProp": "PhoneNumber"
}, ],
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "Tabloda Gösterilecek Kayıt Bulunamadı",
"info": "Gösterilen : _START_ - _END_ / _TOTAL_ ",
"infoEmpty": "Kayıt Bulunamadı.",
"infoFiltered": "(Toplam _MAX_ kayıttan sorgulama yapıldı.)",
"lengthMenu": "_MENU_ Kayıt Sayısı",
"search": "Ara:",
"zeroRecords": "Kayıt Bulunamadı."
},
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
dom: 'Bfrtip',
buttons: [{
extend: 'print',
"sButtonText": 'Export',
className: 'btn default',
oSelectorOpts: {
page: 'all'
},
bShowAll: true,
sAjaxSource: "/Manage/Notice/_NoticeDatatable?readStatus=" + $(this).val() + "¬iceId=" + $("#NoticeSearch_Id").val()
}, {
extend: 'copy',
className: 'btn default'
}, {
extend: 'pdf',
className: 'btn default'
}, {
extend: 'excel',
className: 'btn default'
}, {
extend: 'csv',
className: 'btn default'
},
],
"order": [
[0, 'asc']
],
"lengthMenu": [
[5, 10, 15, 20, 5000],
[5, 10, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 10,
});
it's not working below code.
buttons: [{
extend: 'print',
"sButtonText": 'Export',
className: 'btn default',
oSelectorOpts: {
page: 'all'
},
bShowAll: true,
sAjaxSource: "/Manage/Notice/_NoticeDatatable?readStatus=" + $(this).val() + "¬iceId=" + $("#NoticeSearch_Id").val()
}, {
extend: 'copy',
className: 'btn default'
}, {
extend: 'pdf',
className: 'btn default'
}, {
extend: 'excel',
className: 'btn default'
}, {
extend: 'csv',
className: 'btn default'
},
],
When I was click to print button,return only 10 record but I want to all record print.
I am using the datatables serverside too and this is how I managed to print all data without braking anything: providing the "lengthMenu" option to let user select all data:
$('#table').DataTable({
"ajax": {
url: "my_url",
type: 'POST'
},
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"processing": true,
"serverSide": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"columns": [
{ "data": "a" },
{ "data": "b" },
{ "data": "c" },
{ "data": "d" },
{ "data": "e" }
],
"dom": 'Blfrtip',
"buttons": [
{
extend: 'print'
}
]
});
});
Here, with providing the "lengthMenu" option, the user can select a range or "All" data to view and if the user wants to export all data, then the user will select the "All" selection from the length menu drop down.
I think when server side is enabled, you need to return the number of records. See the documentation, especially the ajax section. Note the records total in the JSON response:
"recordsTotal": 57,
Here's a good Datatables support thread: https://datatables.net/forums/discussion/32031/pagination-with-server-side-processing. They discuss server side pagination in detail.
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.