Full address history with DataTables ajax loading

views/address.pug

@@ -4,25 +4,25 @@ block content
   - var balance = (address.received - address.sent) / 100000000;
   - var sent = address.sent /100000000
   - var received = address.received / 100000000
-    img.qrcode.pull-right.hidden-xs(src='/qr/' + address.a_id)
+  img.qrcode.pull-right.hidden-xs(src='/qr/' + address.a_id)
   .col-xs-12.col-md-10.col-md-offset-1
     .panel.panel-default.panel-address-summary
-      .panel-heading(style='position:relative;')        
+      .panel-heading(style='position:relative;')
         strong #{address.a_id}
         if settings.labels[address.a_id]
-          if settings.labels[address.a_id].type  
+          if settings.labels[address.a_id].type
             label(class='label label-' + settings.labels[address.a_id].type + ' pull-right hidden-xs', style='margin-left:15px;')
               =settings.labels[address.a_id].label
               if settings.labels[address.a_id].url
                 a(href=settings.labels[address.a_id].url, target='_blank')
                   span.fa.fa-question-circle(style='margin-left:5px;')
           else
-            label.label.label-default.pull-right.hidden-xs(style='margin-left:15px;') 
+            label.label.label-default.pull-right.hidden-xs(style='margin-left:15px;')
               =settings.labels[address.a_id].label
               if settings.labels[address.a_id].url
                 a(href=settings.labels[address.a_id].url, target='_blank')
                   span.fa.fa-question-circle(style='margin-left:5px;')
-      table.table.table-bordered.table-striped.summary-table 
+      table.table.table-bordered.table-striped.summary-table
         thead
           tr
             if settings.show_sent_received == true
@@ -31,23 +31,17 @@ block content
               if settings.show_sent_received == true
                 th #{settings.locale.total_received} (#{settings.symbol})
               th #{settings.locale.rl_balance} (#{settings.symbol})
-        tbody             
+        tbody
           tr
-            if settings.show_sent_received == true 
+            if settings.show_sent_received == true
               td #{sent.toFixed(8)}
             if address.a_id !== 'coinbase'
               if settings.show_sent_received == true
                 td #{received.toFixed(8)}
               td #{balance.toFixed(8)}
-    .panel.panel-default.hidden-xs
-      .panel-heading
-        strong #{settings.locale.ex_latest_transactions}
-      table.table.table-bordered.table-striped.history-table
-        include ./includes/address_history.pug
-    .panel.panel-default.hidden-lg.hidden-md
+    .panel.panel-default
       .panel-heading
         strong #{settings.locale.ex_latest_transactions}
       table.table.table-bordered.table-striped
         include ./includes/address_history.pug
-    .footer-padding
-            
+    .footer-padding

views/includes/address_history.pug

@@ -1,38 +1,57 @@
-thead
-  tr
-    th #{settings.locale.timestamp}
-    th #{settings.locale.tx_hash}
-    th #{settings.locale.mkt_amount} (#{settings.symbol})
-tbody
-  each tx in txs
-    - var time = format_unixtime(tx.timestamp)
+script.
+  var hashAddress = "#{address.a_id}";
+  $(document).ready(function () {
+    var rtable = $('#address-txs').dataTable({
+      autoWidth: true,
+      searching: false,
+      ordering: false,
+      responsive: true,
+      lengthChange: true,
+      processing: true,
+      serverSide: true,
+      ajax: {
+        "url": '/ext/getaddresstxsajax',
+        "data": {
+          "address": hashAddress
+        }
+      },
+      rowCallback: function (row, data, index) {
+        var timestamp = data[0]; //variables for better readability
+        var txhash = data[1]; //variables for better readability
+        var out = data[2]; //variables for better readability
+        var vin = data[3]; //variables for better readability
+
+        $("td:eq(0)", row).html(timestamp);
+        $("td:eq(1)", row).html('<a href="/tx/' + txhash + '">' + txhash + '</a>');
+
+        var amount = 0;
+
+        if(out > 0 && vin > 0) {
+          amount = (out - vin) / 100000000
+          if (amount < 0) {
+            amount = amount * -1
+            $("td:eq(2)", row).html("-" + amount.toFixed(8)).addClass("info");
+          } else if (amount > 0) {
+            ammount = amount.toFixed(8);
+            $("td:eq(2)", row).html("+" + amount).addClass("info");
+          } else {
+            $("td:eq(2)", row).html(amount.toFixed(8)).addClass("info");
+          }
+        }else if(out > 0) {
+          amount = out / 100000000;
+          $("td:eq(2)", row).html("+" + amount.toFixed(8)).addClass("success");
+        }else{
+          amount = vin / 100000000;
+          $("td:eq(2)", row).html("-" + amount.toFixed(8)).addClass("danger");
+        }
+
+      },
+    });
+  });
+table#address-txs.table.table-bordered.table-striped
+  thead
     tr
-      td #{time} 
-      td
-        a(href='/tx/' + tx.txid) #{tx.txid}
-      - var out = 0
-      - var vin = 0
-      each r in tx.vout 
-        if r.addresses == address.a_id
-          - out = r.amount
-      each s in tx.vin
-        if s.addresses == address.a_id
-          - vin = s.amount
-      if out > 0 && vin > 0
-        td.info
-          - var amount = (out - vin) / 100000000
-          if amount < 0
-            - amount = amount * -1
-            | - #{amount.toFixed(8)}
-          else if amount > 0
-            | + #{amount.toFixed(8)}
-          else
-            | #{amount.toFixed(8)}
-      else if out > 0
-        td.success
-          - var amount = out / 100000000
-          | + #{amount.toFixed(8)}
-      else
-        td.danger
-          - var amount = vin / 100000000
-          | - #{amount.toFixed(8)}
+      th.hidden-xs #{settings.locale.timestamp}
+      th.hidden-xs #{settings.locale.tx_hash}
+      th #{settings.locale.mkt_amount} (#{settings.symbol})
+  tbody