Develop Reference

How to deal with null values in JQuery DataTable when using ajax

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" },
],

lengthChange doesn't show when I add button(print) in datatables

I'm having problem of how to show both lengthChange and print button.
Here's my code:
$(document).ready(function () {
$('.table-driver').DataTable({
"processing": true,
"serverSide": true,
"autoWidth": false,
"ajax": "{{route('users.show')}}",
"columns": [
{ "data": "name", name: "name" },
{ "data": "rate", rate: "rate" },
{ "data": "age", age: "age" },
{ "data": "status", status: "status" },
{"data":"action", action: "action", sort: false}
],
dom: 'Bfrtip',
buttons: [
'print'
]
});
});
Here's the output:
And my desired output:
Beginner of datatables, someone could help me about this please. thanks in adv. Sirs.

I encountered this and I added l to the dom element
like this
dom: 'Blfrtip',
notice the difference
'Bfrtip' and 'Blfrtip'
Hope it helps someone

Here is the doc of Page Length Options : https://datatables.net/examples/advanced_init/length_menu.html
Add option :
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
Add pageLength to the buttons list :
https://datatables.net/reference/button/pageLength
buttons: [ 'pageLength', ... ]

Try this it will help you
$('#t1').DataTable({dom: 'lBfrtip',
buttons: [
'csv'
]});
});

Please change dom: 'Bfrtip', to dom: 'lBfrtip',
Example :- http://jsfiddle.net/p33x5L3t/1/

How to format currency in Datatables?

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

Incorrect header when exporting to PDF with yadcf filter

When I am trying to export to pdf my Datatable with a filter yadcf, the header show always every case from my filter, how can I hide that?
My javascript is :
var vsan = $('#vsan').DataTable( {
"lengthMenu": [ [-1, 10, 40, 50], ["All", 10, 40, 50] ],
"sDom": '<"top"i>fBltif',
"buttons": [
{
extend: 'print',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excel',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'copyHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csv',
exportOptions: {
columns: ':visible'
}
}
],
"bJQueryUI": true, //Enable jQuery UI ThemeRoller support
"bAutoWidth": false,
"bDestroy": true,
//"order": [[ 3, "desc" ]], //tri par défaut
"bStateSave": false, //plante ?
"bPaginate": true, //Enable or disable pagination.
"bInfo": true,
});
yadcf.init(vsan, [{column_number : 0, filter_type : "none"}, {column_number : 1, filter_type : "none"}, {column_number : 2, filter_type : "none"}, {column_number : 3, filter_type : "select"}, {column_number : 4, filter_type : "auto_complete"}, {column_number : 5, filter_type : "range_number_slider"},{column_number : 6, filter_type : "none"}, {column_number : 7, filter_type : "range_number_slider"}]);
Here is the problem :
i'm using :
http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js
https://rawgit.com/vedmack/yadcf/8e071af195106fa702f942373c65164b89ca40ff/jquery.dataTables.yadcf.js
Thanks

Ok i did it, but i think it s very weird :
exportOptions: {
columns: ':visible' ,
format: {
header: function ( data, column, row )
{
return data.substring(data.indexOf("inline-block")+15,data.indexOf("<span"));
}
}
}
I don't know if is it to me to patch that, or maybe there is a bug, but the point is that it works !

I too faced this issue and I did something like below:-
exportOptions: {
columns: ':visible' ,
format: {
header: function ( data, column, row )
{
return data.split('<')[0];
}
}
}
It worked for me. This will remove the div which is getting added.
When I checked my header data was something like: -
column name<div id="yadcf-filter-wrapper--crime_table-7" class="yadcf-filter-wrapper"><select id="yadcf-filter--crime_table-7" class="yadcf-filter " onchange="yadcf.doFilter(this, '-crime_table', 7, 'contains');" onkeydown="yadcf.preventDefaultForEnter(event);" onmousedown="yadcf.stopPropagation(event);" onclick="yadcf.stopPropagation(event);"><option value="-1">Select Column</option>............................<button type="button" id="yadcf-filter--crime_table-7-reset" onmousedown="yadcf.stopPropagation(event);
So I split the div from the column name and kept just the header.

Datatables js 1.9.4 pagination and search doesn't work with server side generation

I'm using datatables js 1.9.4 and use their ajax data population capabilities. When I create them in this way pagination shows controls and search bar is there as well, but neither work. Alos the data table is showing all data in one page.
Here is the generation JS:
$("#prop_table").dataTable({
"aaSorting": [[2, "desc" ]],
"sDom": "<'row'<'col-lg-9'l><'col-lg-3'f>r>t<'row'<'col-lg-5'i><'col-lg-7'p>>",
"sPaginationType": "bootstrap",
"bJQueryUI": false,
"bAutoWidth": false,
"aLengthMenu": [[5, 10, 25, -1], [5, 10, 25, "All"]],
"iDisplayLength": 5,
"oLanguage": {
"sSearch": "<span></span> _INPUT_",
"sLengthMenu": "<span>_MENU_</span>",
"oPaginate": { "sFirst": "First", "sLast": "Last" }
},
"bProcessing": true,
"iDisplayLength":5 ,
"bServerSide": true,
"sAjaxSource": "/php/api_prop_down.php",
"aoColumns": [{
"mData":"name"
},{
"mData": "time_down"
},{
"mData": "status_id"
},{
"mData": "button",
"mRender": function(data){
if (data != "null" )
return "<button id=\"prop_issue"+data+"\" issue=\""+data+"\" class=\"btn\" data-toggle=\"modal\" data-target=\"#myModal\" onclick=\"getTicket("+data+")\">"+data+"</button>";
else
return "no ticket";
}
}
]
});
$('.dataTables_length select').uniform();
$('.dataTables_paginate > ul').addClass('pagination');
$('.dataTables_filter>label>input').addClass('form-control');
// Set the classes that TableTools uses to something suitable for Bootstrap
$.extend( true, $.fn.DataTable.TableTools.classes, {
"container": "btn-group",
"buttons": {
"normal": "btn",
"disabled": "btn disabled"
},
"collection": {
"container": "DTTT_dropdown dropdown-menu",
"buttons": {
"normal": "",
"disabled": "disabled"
}
}
} );
// Have the collection use a bootstrap compatible dropdown
$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
"collection": {
"container": "ul",
"button": "li",
"liner": "a"
}
} );
MY server side script returns a JSON, which is an encoded php array:
$output = array("sEcho" => intval($_GET['sEcho']),
"iTotalRecords" => $count,
"iTotalDisplayRecords" => 5,
"aaData" => $aaData );
....
echo json_encode(propsDownJSON());
Anyone has any insight as to why could this be happening?