Display record from multiple tables with custom paging in ASP.Net GridView using jQuery AJAX

I want to display record from 4 columns in 4 tables into a column in grid view. But it does display the actual number of records. So i tried only a column from one table. The number i got is higher than the 4 columns combined which is not supposed to be so 

So the numbers does not add up, i just noticed it doesn't display the actual number of the 4 column combined. i guess something is wrong with the procedure.

Please help

My code

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src=" https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="ASPSnippets_Pager.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        GetCustomers(1);
        var checked = [];
        $('[id*=chkSelect]').on('click', function () {
            if ($(this).is(":checked")) {
                checked.push($(this).closest('tr').find('td').eq(1).html());
            } else {
                checked.pop($(this).closest('tr').find('td').eq(1).html());
            }

            $('[id*=hfCheckedIds]').val(checked.join(','));
        });
    });

    $(document).on("click", '.Pager .page', function () {
        GetCustomers(parseInt($(this).attr('page')));
    });

    $(document).on('click', '.view', function () {
        $('[id*=hfId]').val($(this).closest('tr').find('td').eq(1).html());
    });
    var i = 0;
    function GetCustomers(pageIndex) {
        $.ajax({
            type: "POST",
            url: "R.aspx/GetCustomers",
            data: '{pageIndex: ' + pageIndex + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
          success: function (response) {
    $('[id$=gvDetails]').prepend($("<thead></thead>").append($('[id$=gvDetails]').find("tr:first"))).DataTable().destroy();
    var xmlDoc = $.parseXML(response.d);
    var xml = $(xmlDoc);
    var customers = xml.find("orders");
    alert(customers.length);
    var row = $("[id$=gvDetails] tbody tr:last-child").eq(0).clone(true);
    $("[id$=gvDetails] tbody tr").not($("[id$=gvDetails] tbody tr:first-child")).remove();
    $.each(customers, function () {
 
        $("td", row).eq(1).html($(this).find("orderid").text());
        $("td", row).eq(2).html($(this).find("posino").text());
        $("td", row).eq(3).html($(this).find("producttype").text());
        $("td", row).eq(4).html($(this).find("pid").text());
   
 
        $("[id$=gvDetails]").append(row);
        row = $("[id$=gvDetails] tbody tr:last-child").eq(0).clone(true);
    });
    $("[id$=gvDetails] tbody tr:first-child").remove();
    if (i != 0) {
        $('[id$=gvDetails]').DataTable({
            "paging": false,
            "info": false
        });
    } else {
        $('[id$=gvDetails]')
            .prepend($("<thead></thead>").append($('[id$=gvDetails]').find("tr:first")))
            .DataTable({
                "paging": false,
                "info": false
            });
    }
    i++;
    var pager = xml.find("Pager");
    $(".Pager").ASPSnippets_Pager({
        ActiveCssClass: "current",
        PagerCssClass: "pager",
        PageIndex: parseInt(pager.find("PageIndex").text()),
        PageSize: parseInt(pager.find("PageSize").text()),
        RecordCount: parseInt(pager.find("RecordCount").text())
    });
},
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    }
</script>

CREATE PROCEDURE [dbo].[koko]
      @PageIndex INT = 1
      ,@PageSize INT = 15
      ,@RecordCount INT OUTPUT
AS
BEGIN
    SET NOCOUNT ON;
    SELECT DISTINCT  DENSE_RANK() OVER (ORDER BY o.[orderid] desc) AS RowNumber,
        o.orderid,
    CASE WHEN o.producttype = '3' THEN c.posino
    WHEN o.producttype = '4' THEN d.dieno
         WHEN o.producttype = '6' THEN e.embid
         WHEN o.producttype = '1' THEN j.gietzdieref
    END 'posino_dieno_embid_gietzdieref',
    o.producttype,j.pid
    INTO #Results
    FROM orders o
    INNER JOIN job_cylinder c ON c.id = o.posino
    INNER JOIN job_emboss e ON  e.id  = o.posino
         INNER JOIN job_die d ON  d.id  = o.posino
         INNER JOIN job j ON  j.id  = o.productcode
 
    SELECT @RecordCount = COUNT(*)
    FROM #Results
 
    SELECT * FROM #Results
    WHERE RowNumber between (@PageIndex-1)*@PageSize + 1
    AND (((@PageIndex-1)*@PageSize + 1) + @PageSize)-1 OR @PageIndex = -1
 
    DROP TABLE #Results
END
GO