Custom Document Preview on Click of Document Link in GRID ( DataTable)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <script type="text/javascript" src="https://gkms.sharepoint.com/sites/Khaitan/SiteAssets/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="https://gkms.sharepoint.com/sites/Khaitan/SiteAssets/jeditable.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.css" />
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script>

    <script type="text/javascript" src="https://gkms.sharepoint.com/sites/Khaitan/SiteAssets/jquery.SPServices-2014.02.js"></script>

    <script type="text/javascript" charset="utf-8">
       $(document).ready(function () {
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveListItems);
            ExecuteOrDelayUntilScriptLoaded(CallOut, "callout.js");
            var aHtml="";
            var rowID;        
            var siteUrl = "https://gkms.sharepoint.com/sites/Khaitan/";
            var restUrl="";
           
            function retrieveListItems() {
             // This piece of code retrieves list items from the list called "Resources"
                // you can change the name of the list in the variable 'listName'
                // Also, the fields revieved are 'ows_Title' and 'ows_Cost', you can change those too
                $().SPServices({
                    operation: "GetListItems",
                    async: false,
                    listName: "KhaitanDocLib",
                    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='EncodedAbsUrl'/></ViewFields>",
                    completefunc: function (xData, Status) {
                        //alert(xData.responseText);
                        $(xData.responseXML).SPFilterNode("z:row").each(function () {
                            var aHtml = "<a href=" + $(this).attr("ows_EncodedAbsUrl") + ">" + $(this).attr("ows_Title") + "</a>";
                            var tdHtml = "<tr class='gradeX' id='" + $(this).attr("ows_ID") + "'> <td class='DocLinkID'>" + aHtml + "</td>";
                            tdHtml += "<td class='two'>" + $(this).attr("ows_PracticeArea") + "</td>";
                            $(".tablebodyresources").append(tdHtml);
                        });
                    }
                });

                // the table is constructed dynamically where results are going to be placed
                var nCloneTh = document.createElement('th');
                var nCloneTd = document.createElement('td');
                nCloneTd.innerHTML = '<img class="editRowIMG" src="https://gkms.sharepoint.com/sites/Khaitan/Style Library/details_open.png" height="25" width="25"  alt="EDIT"><img class="delItemImg" src="https://gkms.sharepoint.com/sites/Khaitan/Style Library/Delete.png" height="25" width="25" alt="Delete">';
                nCloneTh.innerHTML = 'Actions';
                nCloneTd.className = "center";
                // this is an 'Add' image  inserted in front of each row
                $('#resourcepool thead tr').each(function () {
                    //this.insertBefore( nCloneTh, .childNodes[0]);
                    $(this).append(nCloneTh);
                });

                $('#resourcepool tbody tr.gradeX').append(nCloneTd);
                var resourceTable = $('#resourcepool').dataTable();
                //this is an event handler to handle users clicking on the 'Add' image in front of each row
               
                $('#resourcepool').on( 'click', 'tbody tr .DocLinkID', function () {
                    rowID=this.parentElement.id;
//alert(rowID);
restUrl = "https://gkms.sharepoint.com/sites/Khaitan/_api/web/lists/getbytitle('KhaitanDocLib')/items("+rowID+")";
$.ajax({
                    url: restUrl,
                    method: "GET",                  
                    headers: { "Accept": "application/json; odata=verbose" },
                    success: function (data) {
                    var metaDataCols ="";
                    $("#metadatav").html(metaDataCols);
                      alert("success");
                        $("#frame").attr("src", data.d.ServerRedirectedEmbedUrl);
                        metaDataCols="<table><tr><td>Practice Area:</td><td>"+data.d.PracticeArea+"</td><td>Sub Practice Area:</td><td>"+data.d.SubPracticeArea+"</td></tr>";
                        metaDataCols +="<tr><td>Comments</td><td>"+data.d.Comments+"</td></tr><table>";
                        $("#metadatav").append(metaDataCols);
                        $("#openDocID").attr("href", data.d.ServerRedirectedEmbedUrl);
                        GetDocNameLinkURL();
                                       
                    },
                    error: function (data) {
                        alert("error");
                    }  
                });//onclick of row            

});
               
            }//retrieve item method
         
function GetDocNameLinkURL(){
restUrl="https://gkms.sharepoint.com/sites/Khaitan/_api/web/lists/getbytitle('KhaitanDocLib')/items("+rowID+")/File";
   $.ajax({
    url: restUrl,
                    method: "GET",                  
                    headers: { "Accept": "application/json; odata=verbose" },
       success: function(results){
//alert(results);
var docURL = results.d.LinkingUrl.split('?');
     $("#downloadDocID").attr("href",docURL[0]);
     var arr = results.d.Name.split('.');
     $("#DocNameID").text(arr[0]);

       }
   });
}
    function myFunction(){
     alert("Document downloaded");
      }// download completes
     
        });//DOCUMENT.READY      
       
   


     </script>

    <style type="text/css">
   
        .edit-row-modal {
            display: none;
        }
       
     
    </style>

</head>
<body id="dt_example">
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="resourcepool">
        <thead>
            <tr>
                <th>Name Of Document</th>
                <th>Practice Area</th>
            </tr>
        </thead>
        <tbody class="tablebodyresources"></tbody>
    </table>

  <div id="mydiv" width="100%" height="100%">
  <h1 id="DocNameID"></h1>
  <iframe Id="frame" height="440px"></iframe>
  <div id="metadatav"></div>  
<a id="openDocID"><input type="button" value="Open" ></a>
<a id="downloadDocID" onclick="myFunction()"><input type="button" value="Download" ></a>
</div>

</body>
</html>