DataTable Object to Table

by jamesamuir

HTML

<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="container" style="margin-top:20px;">
  <form class="form" id="exampleForm">
   <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>
            Company
          </th>
          <th>
            Name
          </th>
          <th>
            Total Dues
          </th>
        </tr>
      </thead>
    </table>
  </form>
   
  <button class="btn btn-primary" id="btnAction">
    Clicky Me    
  </button>
</div>

JavaScript

jQuery(document).ready(function ($) {
var data = [
 {
	 "Name":"Best Tendies",
	 "Company":"801679",
	 "TotalDue":29253.81,
	 "PaymentDocuments":
		[
		 {
			"Id":"3b5aaa72-9466-4c3a-9b1e-03a513f6d4e1",
			"Amount":"29253.81"		
		 }	
		]
	},
  {
	 "Name":"Incredibev",
	 "Company":"801678",
	 "TotalDue":4251.86,
	 "PaymentDocuments":
		[
		 {
			"Id":"3b5bbb72-6467-3b4a-8b2f-04b421c2c5a2",
			"Amount":"4251.86"		
		 }	
		]
	}	
]

var table = $('#example').DataTable({
  data: data,
  serverSide: false,
  lengthMenu: [[1], [1]],
  order: [[1, 'asc']],
	columns: [            
            {
                data: 'Company'
            },
            {
                data: 'Name'
            },
            {
                data: 'TotalDue'
            },
            {
                data: 'PaymentDocuments',
                visible:false
            }
           ],
  initComplete: function () {
    this.api().rows().every(function (rowIdx, tableLoop, rowLoop) {

      // Add the inputs under the account totals row
      var data = this.data();
      $(this.child(format(this.data())).show());

      // Add selector class to the generated child tr
      $(this.child()[0]).addClass("account-input-row bg-danger")
    });
  }           
});

 $(document).on("click", '#btnAction', function (e) {  
 		// This returns and empty string
  	var formData = table.$('input').serialize();
    console.log(formData);
    // This only gets the visible input
    var otherFormData = JSON.stringify($('#exampleForm').find(".adjustable-amount").serializeArray());
    console.log(otherFormData);
    
    
  });

 function format ( d ) {
            // `d` is the original data object for the row

            var documentBody = '';

            $.each(d.PaymentDocuments, function (index, value) {
                var documentRow = '<tr>' + 
                    '<td>' + value.Id + '</td>' +                                  
                    '<td>' +
                    '<input name="' +...