Таблица данных jQuery с итоговой суммой и кнопками

Я новичок в jQuery и работаю над проектом, который использует DataTables для отображения и сортировки данных. Пока у меня есть большинство функций, которые мне нужны, но мой скрипт, который показывает общую сумму столбца, имеет проблемы с моим скриптом кнопок.

Вот мой общий сценарий:

$(document).ready(function() {
  $('#reportTable').DataTable({
    "footerCallback": function(row, data, start, end, display) {
      var api = this.api(),
        data;

      // 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 all filtered pages
      if (api.column(4, {
          search: 'applied'
        }).data().length) {
        pageTotal = api.column(4, {
          search: 'applied'
        }).data().reduce(function(a, b) {
          return intVal(a) + intVal(b);
        });
      } else {
        pageTotal = 0;
      }

      $(api.column(4).footer()).html(pageTotal.toFixed(2));

      // Update footer
      $(api.column(4).footer()).html(pageTotal.toFixed(2) + ' hours ( ' + total.toFixed(2) + ' total hours)');
    }
  });
});

Вот мой скрипт кнопок:

$('#reportTable').DataTable({
  dom: 'Blfrtip',
  buttons: [{
      extend: 'pdf',
      className: 'green glyphicon glyphicon-file',
      title: 'Report',
      filename: 'Report',
      exportOptions: {
        columns: [0, 1, 2, 3, 4, 5, 6]
      }
    },
    {
      extend: 'excel',
      className: 'green glyphicon glyphicon-list-alt',
      title: 'Report',
      filename: 'Report',
      exportOptions: {
        columns: [0, 1, 2, 3, 4, 5, 6]
      }
    },
    {
      extend: 'copy',
      className: 'green glyphicon glyphicon-duplicate',
      exportOptions: {
        columns: [0, 1, 2, 3, 4, 5, 6]
      }
    },
    {
      extend: 'print',
      className: 'green glyphicon glyphicon-print',
      title: 'Report',
      text: 'Print',
      exportOptions: {
        modifier: {
          page: 'current'
        }
      }
    }
  ]
});

Я понимаю, что это проблема инициализации (поскольку я инициализирую дважды), но моя попытка исправить это не работает. Похоже, я смогу сделать что-то вроде этого:

$(document).ready(function() {
  $('#reportTable').DataTable({
    "footerCallback": function(row, data, start, end, display) {
      var api = this.api(),
        data;

      // 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 all filtered pages
      if (api.column(4, {
          search: 'applied'
        }).data().length) {
        pageTotal = api.column(4, {
          search: 'applied'
        }).data().reduce(function(a, b) {
          return intVal(a) + intVal(b);
        });
      } else {
        pageTotal = 0;
      }

      $(api.column(4).footer()).html(pageTotal.toFixed(2));

      // Update footer
      $(api.column(4).footer()).html(pageTotal.toFixed(2) + ' hours ( ' + total.toFixed(2) + ' total hours)');
    }
  }, {
    dom: 'Blfrtip',
    buttons: [{
        extend: 'pdf',
        className: 'green glyphicon glyphicon-file',
        title: 'Report',
        filename: 'Report',
        exportOptions: {
          columns: [0, 1, 2, 3, 4, 5, 6]
        }
      },
      {
        extend: 'excel',
        className: 'green glyphicon glyphicon-list-alt',
        title: 'Report',
        filename: 'Report',
        exportOptions: {
          columns: [0, 1, 2, 3, 4, 5, 6]
        }
      },
      {
        extend: 'copy',
        className: 'green glyphicon glyphicon-duplicate',
        exportOptions: {
          columns: [0, 1, 2, 3, 4, 5, 6]
        }
      },
      {
        extend: 'print',
        className: 'green glyphicon glyphicon-print',
        title: 'Report',
        text: 'Print',
        exportOptions: {
          modifier: {
            page: 'current'
          }
        }
      }
    ]
  });
});

... но у меня это не работает. Я не получаю никаких ошибок, но какой бы сценарий ни находился «наверху», выполняется, а вторая часть игнорируется. Может кто-нибудь объяснить мне логику этого? Я борюсь с синтаксисом.

Спасибо!