$(document).ready(function() {
    $('.main-spinner').show();
  var index = $('#payablenote-report').DataTable({
    "lengthMenu": [[20, 25, 50, 100, 500], [20, 25, 50, 100, 500]],
    serverSide: true,
      ajax: "/realty/get-payable-note-po-data",
    columns: [
      {data: 'id'},
        {data: 'sale_date'},
        {data: 'client_fullname'},
        {data: 'client_phone1'},
        {data: 'client_address'},
        {data: 'project_name'},
        {data: 'category_name', width: '5px'},
        {data: 'item_street'},
        {data: 'item_house'},
        {data: 'item_zone'},
        {data: 'item_name'},
        {data: 'item_size_house'},
        {data: 'item_size_land'},
        {data: 'item_price'},
        {data: 'sale_receive'},
    ],

      columnDefs: [
          { className: 'text-right', targets: [4] },
          { className: 'text-center', targets: [0,1,2,3] },
      ],
    "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 total_item_price = api
            .column( 13 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );
        var total_cash_in = api
            .column( 14 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );
  
        var numFormat = $.fn.dataTable.render.number( '\,', '.', 2, '$ ' ).display;
        $( api.column( 13 ).footer() ).html(numFormat(total_item_price));
        $( api.column( 14 ).footer() ).html(numFormat(total_cash_in));
      },

      "initComplete": function(settings, json) {
          $('.main-spinner').hide();
      },
  });
  
  $.fn.dataTable.ext.errMode = 'throw';
});