      $(document).ready(function() {
            $('.main-spinner').show();
              var index = $('#datatable_payment_collection_report').DataTable({
                "lengthMenu": [[20, 25, 50, 100, 500], [20, 25, 50, 100, 500]],
                dom: 'Blfrtip',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                ],
                serverSide: true,
                "scrollY":"600px",
                "scrollCollapse": true,
                ajax: "/realty/report-payment-collection",
                  columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex' , orderable: false, searchable: false},
                    {data: 'due_date',name:'nso007_loan_process.loanprocess_datepayment'},
                    {data: 'project_name',name:'nso007_project_stock.project_name'},
                    {data: 'category_name',name:'nso007_category_stock.category_name'},
                    {data: 'item_code',name:'nso007_item_stock.item_house'},
                    {data: 'client_name',name:'nso007_client.client_firstname'},
                    {data: 'client_contact',name:'nso007_client.client_phone1'},
                    {data: 'principle',name:'nso007_loan_process.loanprocess_principlepay'},
                    {data: 'interest',name:'nso007_loan_process.loanprocess_interestpay'},
                    {data: 'payment',name:'nso007_loan_process.loanprocess_owepay'}
                  ],
                "initComplete": function(settings, json) {
                  $('.main-spinner').hide();
                },
                
                
                "initComplete": function(settings, json) {
                    $('.main-spinner').hide();
                },

                "footerCallback": function ( row, data, start, end, display ) {
                  var api = this.api(), data;
       
                  // converting to interger to find total
                  var intVal = function ( i ) {
                      return typeof i === 'string' ?
                          i.replace(/[\$,]/g, '')*1 :
                          typeof i === 'number' ?
                              i : 0;
                  };
       
                  var principle_Total = api
                      .column( 7 )
                      .data()
                      .reduce( function (a, b) {
                          return intVal(a) + intVal(b);
                      }, 0 );

                  var interest_Total = api
                      .column( 8 )
                      .data()
                      .reduce( function (a, b) {
                          return intVal(a) + intVal(b);
                      }, 0 );

                  var payment_Total = api
                      .column( 9 )
                      .data()
                      .reduce( function (a, b) {
                          return intVal(a) + intVal(b);
                      }, 0 );
              
                  var numFormat = $.fn.dataTable.render.number( '\,', '.', 2, '$ ' ).display;
                  $( api.column( 7 ).footer() ).html(numFormat(principle_Total));
                  $( api.column( 8 ).footer() ).html(numFormat(interest_Total));
                  $( api.column( 9 ).footer() ).html(numFormat(payment_Total));
                },   
          });
          index.on( 'order.dt search.dt', function () {
            index.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
              cell.innerHTML = i+1 ;
            } );
          } ).draw();
          $.fn.dataTable.ext.errMode = 'throw';
      });