w2v-server: separate similar/collocator tables
diff --git a/templates/index.html.ep b/templates/index.html.ep
index 719cb5a..0f48718 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -23,6 +23,18 @@
     } );
 
     $('#firsttable').DataTable({
+        "sScrollY": "760px",
+        "bScrollCollapse": true,
+        "bPaginate": false,
+        "bJQueryUI": true,
+        "dom": '<"top">rt<"bottom"flp><"clear">',
+        "aoColumnDefs": [
+            { "sWidth": "10%", "aTargets": [ -1 ] }
+        ]
+    } );
+
+
+         $('#secondtable').DataTable({
         "sScrollY": "800px",
         "bScrollCollapse": true,
         "bPaginate": false,
@@ -33,7 +45,8 @@
         ]
     } );
 });
-     $(function() {
+
+$(function() {
        $( document ).tooltip({
 			   content: function() {
 				   return $(this).attr('title');
@@ -375,18 +388,11 @@
    <div id="mytable"/>
 	  % if($lists && (@$lists) > 0 && (@$lists)[0]) {
 	    <div id="wrapper">
-        <div id="first" style="width:400px">
+        <div id="first" style="width:200px">
 		    <table class="display compact nowrap" id="firsttable">
           <thead>
 			    <tr>
 				    <th align="right">#</th><th align="right">cos</th><th align="left">paradigmatic</th>
-            % if($collocators) {
-				    <th align="right" title="The window around the target word that is considered for summation.">w'</th>
-						<th align="right" title="Raw (max.) activation of the collocator in the output layers.">a</th>
-						<th title="Σp(c<sub><small>@</small></sub>) – Sum of the probability approximations that the combination of the target word and the collocator at the relative position @ come from the training corpus. Single approximations can be distorted because of sub-sampling frequent words and the sum cannot itself be interpreted as probability." align="right">Σp</th>
-						<th align="right">Σp/|w|</th>
-						<th title="c" align="left">collocator</th>
-				    % }
 			    </tr>
          </thead>
          <tbody>
@@ -428,6 +434,53 @@
                 % } else {
                   <td colspan="2"/>
                 % }
+			        </tr>
+             % last if($i >= 100);
+			      % }
+		      % }
+          </tbody>
+		    </table>
+</div>
+		    <script>
+		     % use Mojo::ByteStream 'b';
+         % my $urlprefix = url_with->query([word=>'']);
+		     $(window).load(function() {
+			     showMap(<%= b(Mojo::JSON::to_json({target => " $word ", mergedEnd=> $mergedEnd, words => \@words, vecs => \@vecs, ranks => \@ranks, marked => \@marked, urlprefix => $urlprefix})); %>);
+		     });
+        </script>
+		% }  else  { # ($word && $word !~ /^\s*$/)
+				<div id="wrapper">
+					<p>
+						ERROR: "<%= $word %>" not found in vocabluary.
+					</p>
+				</div>
+		% }
+		<div id="second" style="width:800px; height:800px; font-family: arial;">
+			<div id="embed">
+			</div>
+		</div>
+    <div id="cost"></div>
+         <div id="second" style="width:500px">
+		    <table class="display compact nowrap" id="secondtable">
+          <thead>
+			    <tr>
+            % if($collocators) {
+            <th>#</th>
+				    <th align="right" title="The window around the target word that is considered for summation.">w'</th>
+						<th align="right" title="Raw (max.) activation of the collocator in the output layers.">a</th>
+						<th title="Σp(c<sub><small>@</small></sub>) – Sum of the probability approximations that the combination of the target word and the collocator at the relative position @ come from the training corpus. Single approximations can be distorted because of sub-sampling frequent words and the sum cannot itself be interpreted as probability." align="right">Σp</th>
+						<th align="right">Σp/|w|</th>
+						<th title="c" align="left">collocator</th>
+				    % }
+			    </tr>
+         </thead>
+         <tbody>
+          % for(my $i=0; $i < 100; $i++) {
+              % my $c = ($collocators? (@$collocators)[$i] : 0);
+			        <tr>
+				        <td align="right">
+  				        <%= ++$i %>.
+				        </td>
                 % if($c) {
 				          <td align="right">
                     <span class="mono"><%= bitvec2window($c->{pos}) %></span>
@@ -450,32 +503,11 @@
                   <td colspan="5"/>
                 % }
 			        </tr>
-             % last if($i >= 100);
 			      % }
-		      % }
           </tbody>
 		    </table>
 </div>
-		    <script>
-		     % use Mojo::ByteStream 'b';
-         % my $urlprefix = url_with->query([word=>'']);
-		     $(window).load(function() {
-			     showTable(<%= b(Mojo::JSON::to_json([@$collocators])) %>);
-			     showMap(<%= b(Mojo::JSON::to_json({target => " $word ", mergedEnd=> $mergedEnd, words => \@words, vecs => \@vecs, ranks => \@ranks, marked => \@marked, urlprefix => $urlprefix})); %>);
-		     });
-        </script>
-		% }  else  { # ($word && $word !~ /^\s*$/)
-				<div id="wrapper">
-					<p>
-						ERROR: "<%= $word %>" not found in vocabluary.
-					</p>
-				</div>
-		% }
-		<div id="second" style="width:800px; height:800px; font-family: arial;">
-			<div id="embed">
-			</div>
-		</div>
-    <div id="cost"></div>
+
 		% if($show_som) {
 		  <div id="som2">
 		  </div>