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

dika0094dika0094 Posts: 6Questions: 1Answers: 0

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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited February 2022

    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:

    var $dTable = $('#example').DataTable({ ...
    

    and here you are doing it again. Hence the error I guess.

    $('#example').DataTable( { ...
    

    I would pull the configuration of the data table together to avoid this problem.

    Maybe something similar to this:

    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>>",
        "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 +' '
                // );
            }
    

    Didn't check the syntax; maybe brackets or commas are missing.

  • dika0094dika0094 Posts: 6Questions: 1Answers: 0

    then how to combine this 2 functions. first i need date time filter, second i need too callback footer to sum the coloums.

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited February 2022

    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.

  • dika0094dika0094 Posts: 6Questions: 1Answers: 0

    i dont understand. can u help me write full code to combine that?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited February 2022
    //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>>"
       });
       
       $dTable.on( 'draw', function (e, settings) {
            var api = $dTable;
            // 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 +' '
            // );
        } );
    

    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.

  • dika0094dika0094 Posts: 6Questions: 1Answers: 0

    can u write full code please? I don't understand how to implement the instructions you gave

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    I think I wrote almost all of your code already. Please post a test case.

  • dika0094dika0094 Posts: 6Questions: 1Answers: 0
  • dika0094dika0094 Posts: 6Questions: 1Answers: 0

    this almost done, but date range filter foem dosent work

    http://live.datatables.net/letokuya/6/edit

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    I'm not clear how the date range filter is supposed to work. Your code is referring to start_date and end_date, but you only have a single date control on the page.

    Colin

Sign In or Register to comment.