String concat Search Result

by Jimmy Chandra

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="pleaseWait">Please wait...</div>
<div id="container" class="container-fluid">
</div>

CSS

.progress { margin-bottom: 0 }

JavaScript

(function () {
    'use strict';
    
    setTimeout(function() {
        var pleaseWait = document.getElementById("pleaseWait");
        var data = getData();
    
        var startTick = ((new Date().getTime() * 10000) + 621355968000000000);
    
        renderSearchResults(data, 
            document.getElementById("container"));
        
        var endTick = ((new Date().getTime() * 10000) + 621355968000000000);
        
        pleaseWait.innerHTML = (endTick - startTick) + "";
    },100);
    
    function getData() {
        var d = [];
        for (var r = 0; r < 4000; r++) {
            var i = r + 1;
            d.push({
                fileName: 'Invoice ' + i + '.pdf',
                docType: 'Purchase Item',
                docNumber: 'INV' + i,
                supplier: 'Invisible P/L',
                docDate: '24-Apr-2015',
                totalAmount: '$1,500.00',
                taxAmount: '$150.00',
                receivedOn: '24-Apr 2015',
                statusPercentage: 90
            });
        }
        return d;
    }
    
    function renderSearchResults(data, container) {
        var vdom = "<table class='table table-condensed table-striped'>";
        vdom += "<thead>";
        vdom += "<tr>";
        vdom += '<th>Filename</th>';
        vdom += '<th>Doc. Type</th>';
        vdom += '<th>Doc. #</th>';
        vdom += '<th>Supplier</th>';
        vdom += '<th class="text-right">Doc. Date</th>';
        vdom += '<th class="text-right">Total Amount</th>';
        vdom += '<th class="text-right">Tax Amount</th>';
        vdom += '<th class="text-right">Received On</th>';
        vdom += '<th style="width:50px">Progress</th>';
        vdom += '<th class="text-center">Status</th>';
        vdom += '<th class="text-right">Actions</th>';
        vdom += "</tr>";
        vdom += "</thead>";
        vdom += "<tbody>";
        
        data.forEach(function(doc) {
            vdom += renderSearchResultItem(doc);
        });
        
       ...