how to combine date time filter and callback footer? i also got error
how to combine date time filter and callback footer? i also got error
i also got error
DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
this is my code
<script type="text/javascript">
//fungsi untuk filtering data berdasarkan tanggal
var start_date;
var end_date;
var DateFilterFunction = (function (oSettings, aData, iDataIndex) {
var dateStart = parseDateValue(start_date);
var dateEnd = parseDateValue(end_date);
//Kolom tanggal yang akan kita gunakan berada dalam urutan 2, karena dihitung mulai dari 0
//nama depan = 0
//nama belakang = 1
//tanggal terdaftar =2
var evalDate= parseDateValue(aData[2]);
if ( ( isNaN( dateStart ) && isNaN( dateEnd ) ) ||
( isNaN( dateStart ) && evalDate <= dateEnd ) ||
( dateStart <= evalDate && isNaN( dateEnd ) ) ||
( dateStart <= evalDate && evalDate <= dateEnd ) )
{
return true;
}
return false;
});
// fungsi untuk converting format tanggal dd/mm/yyyy menjadi format tanggal javascript menggunakan zona aktubrowser
function parseDateValue(rawDate) {
var dateArray= rawDate.split("/");
var parsedDate= new Date(dateArray[2], parseInt(dateArray[1])-1, dateArray[0]); // -1 because months are from 0 to 11
return parsedDate;
}
$( document ).ready(function() {
//konfigurasi DataTable pada tabel dengan id example dan menambahkan div class dateseacrhbox dengan dom untuk meletakkan inputan daterangepicker
var $dTable = $('#example').DataTable({
"dom": "<'row'<'col-sm-4'l><'col-sm-5' <'datesearchbox'>><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>"
});
//menambahkan daterangepicker di dalam datatables
$("div.datesearchbox").html('<div class="input-group"> <div class="input-group-addon"> <i class="glyphicon glyphicon-calendar"></i> </div><input type="text" class="form-control pull-right" id="datesearch" placeholder="Search by date range.."> </div>');
document.getElementsByClassName("datesearchbox")[0].style.textAlign = "right";
//konfigurasi daterangepicker pada input dengan id datesearch
$('#datesearch').daterangepicker({
autoUpdateInput: false
});
//menangani proses saat apply date range
$('#datesearch').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
start_date=picker.startDate.format('DD/MM/YYYY');
end_date=picker.endDate.format('DD/MM/YYYY');
$.fn.dataTableExt.afnFiltering.push(DateFilterFunction);
$dTable.draw();
});
$('#datesearch').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
start_date='';
end_date='';
$.fn.dataTable.ext.search.splice($.fn.dataTable.ext.search.indexOf(DateFilterFunction, 1));
$dTable.draw();
});
});
</script>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api();
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
total = api
.column( 4 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 4, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
$(api.column(4).footer()).html(this.fnSettings().fnFormatNumber( 'Rp ' +pageTotal));
// Update footer
// $( api.column( 4 ).footer() ).html(
// 'Rp '+pageTotal +' '
// );
}
} );
} );
</script>
Answers
Maybe this thread helps with the error. There is many more on this topic in the forum.
https://datatables.net/forums/discussion/comment/171282/#Comment_171282
You are declaring the data table here:
and here you are doing it again. Hence the error I guess.
I would pull the configuration of the data table together to avoid this problem.
Maybe something similar to this:
Didn't check the syntax; maybe brackets or commas are missing.
then how to combine this 2 functions. first i need date time filter, second i need too callback footer to sum the coloums.
Then don't use the callback option but use the api, e.g. this
https://datatables.net/reference/api/columns().footer()
This way you can do the footer later. You should also take a look at the event list to find the suitable event when to do the footer:
https://datatables.net/reference/event/
It is probably the "draw" event that you will require. So that the footer is being recalculated on each table draw.
i dont understand. can u help me write full code to combine that?
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
This is using the "draw" event. I just copied your code from the callback into the event handler. Don't know whether "draw" is appropriate for your use case. If not take a different event, e.g. "init". The reference to the data table is simpler using an event. You don't need "this.api()" but just the data table variable name.
can u write full code please? I don't understand how to implement the instructions you gave
I think I wrote almost all of your code already. Please post a test case.
please check this
http://live.datatables.net/letokuya/1/edit
this almost done, but date range filter foem dosent work
http://live.datatables.net/letokuya/6/edit
I'm not clear how the date range filter is supposed to work. Your code is referring to
start_dateandend_date, but you only have a single date control on the page.Colin