Fix modal handling.

Remove hardcoded columns in datatables fields.
Make modal popup wider to fit the table better.
Add pagination to table.

lib/NGCP/Panel/Field/Contract.pm

@@ -10,7 +10,8 @@ has_field 'id' => (
     required => 1,
     template => 'share/templates/helpers/datatables_field.tt',
     ajax_src => '/contract/ajax',
-    table_fields => ['#', 'Contact #', 'Billing Profile #', 'Status'],
+    table_titles => ['#', 'Contact #', 'Billing Profile #', 'Status'],
+    table_fields => ['id', 'contact.id', 'billing_profile.id', 'status'],
 );
 
 has_field 'create' => (

lib/NGCP/Panel/Field/DataTable.pm

@@ -9,6 +9,7 @@ has 'template' => ( isa => 'Str',
                     default => 'share/templates/helpers/datatables_field.tt' );
 has 'ajax_src' => ( isa => 'Str', is => 'rw' );
 has 'table_fields' => ( isa => 'ArrayRef', is => 'rw' );
+has 'table_titles' => ( isa => 'ArrayRef', is => 'rw' );
 
 sub render_element {
     my ($self) = @_;
@@ -23,11 +24,12 @@ sub render_element {
         value => $self->value,
         ajax_src => $self->ajax_src,
         table_fields => $self->table_fields,
+        table_titles => $self->table_titles,
     };
     my $t = new Template({});
 
-    $t->process($self->template, $vars, \$output) || 
-        print ">>>>>>>>>>>>>>>>> failed to process tt: ".$t->error()."\n";
+    $t->process($self->template, $vars, \$output) or
+        die "Failed to process Datatables field template: ".$t->error();
 
     return $output;
 }

share/templates/helpers/datatables.tt

@@ -4,6 +4,11 @@
 
 <script src="/js/libs/datatables-bootstrap-paging.js"></script>
 <style>
+div.modal {
+    width: 816px;
+    margin: -250px 0 0 -408px
+}
+
 div.dataTables_length label {
     width: 460px;
     float: left;

share/templates/helpers/datatables_field.tt

@@ -15,9 +15,11 @@ $(document).ready(function() {
 
 	$('#[% table_id %]')
 	    .dataTable( {
+        "sDom": "<'row'<'span4'r><'span4'f>>t<'row'<'span4'i><'span4'p>>",
 		"bProcessing": true,
 		"bServerSide": true,
 		"bPaginate": true,
+        "sPaginationType": "bootstrap",
 		"bLengthChange": false,
 		"bSort": true,
 		"bInfo": true,
@@ -25,10 +27,9 @@ $(document).ready(function() {
 		"sAjaxSource": "[% ajax_src %]",
 		
 		"aoColumns": [
-		    		    { "sName": "id" },
-		    		    { "sName": "name" },
-		    		    { "sName": "contract.id" },
-		    		    { "sName": "status" },
+                        [% FOREACH f IN table_fields -%]
+		    		    { "sName": "[% f %]" },
+                        [% END -%]
 		    		    { "mRender": function ( data, type, full ) {
                                 return '<input type="checkbox" value="' + full[0] + '"></input>';
                             },
@@ -53,7 +54,7 @@ $(document).ready(function() {
      <table class="table table-bordered table-striped table-highlight table-hover" id="[% table_id %]">
         <thead>
             <tr>
-                [% FOREACH t IN table_fields %]
+                [% FOREACH t IN table_titles %]
                     <th>[% t %]</th>
                 [% END %]
                 <th class="span"></th>