List All not yet approved "Approval list"

gistfile1.html

<apex:page >
    <apex:includeScript value="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script>
    var statusList = {
        'Started': '？',
        'Pending': 'Pending',
        'Approved': 'Approved'
    }
    var templatesKu = {
        'thumb': ' <div class="row"> '+
                +' <div class="col-sm-6 col-md-4"> '+
                +' <div class="thumbnail"> '+
                  +' <img data-src="holder.js/300x300" alt="..." /> '+
                  +' <div class="caption"> '+
                    +' <h3>Approval in here</h3> '+
                    +' <p>...</p> '+
                    +' <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p></div> '+
                +' </div> '+
              +' </div> '+
            +' </div>',
        'tb': 
            '<tr>'+
            '<td><a href="__url__" target="_blank">__Id__</a></td>'+
            '<td><a href="__urlobject__" target="_blank">__objectname__</a></td>'+
            '<td>__createdBy__</td>'+
            '<td>__actor__</td>'+
            '<td>__status__</td>'+
            '<td>__date__</td>'+
            '</tr>'
    }
    var convertDate = function(dateStr){
        var date = new Date(dateStr);
        return ((date.getMonth() + 1) + '/' + date.getDate() + '/' +  date.getFullYear());
    }
    jQuery(document).ready(function($) {
        var $approvalList = $('#approval-list > tbody');
        var replaceStr = function(str, keys, values) {
            var retval = str;
            for (var i = keys.length - 1; i >= 0; i--) {
                retval = retval.replace(keys[i], values[i]);
            };
            return retval;
        }
        var query = "Select p.Id, p.ProcessInstanceId, p.ProcessInstance.Status, p.ProcessInstance.TargetObjectId, p.ProcessInstance.TargetObject.Name, p.ActorId, p.Actor.Name, p.OriginalActorId, p.CreatedBy.Name, p.CreatedById, p.CreatedDate FROM ProcessInstanceWorkitem p WHERE p.CreatedById='{!$User.Id}' ORDER BY p.CreatedDate DESC";
        $.ajax('/services/data/v30.0/query?q='+query,
        {
            contentType: 'application/json; charset=utf-8',
            beforeSend: function(xhr) {
                // Set the OAuth header from the session ID
                xhr.setRequestHeader('Authorization', 'Bearer {!$Api.Session_ID}');
            },
            success: function(response) {
                // debugger;
                var strs = '';
                $.each(response.records, function(index, item) {
                    strs = replaceStr(templatesKu.tb, 
                        ['__Id__', '__objectname__', '__createdBy__', '__actor__', '__status__', '__url__', '__date__', '__urlobject__'], 
                        [item.Id, item.ProcessInstance.TargetObject.Name, item.CreatedBy.Name, item.Actor.Name, statusList[item.ProcessInstance.Status], 
                            '/p/process/ProcessInstanceWorkitemWizardStageManager?id='+item.Id, convertDate(item.CreatedDate), '/'+item.ProcessInstance.TargetObjectId]
                    );
                    $approvalList.append(strs);
                });
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // Oops - what went wrong?
                alert(jqXHR.status + ': ' + errorThrown);
            }
        }
      );

    </script>
    <p>Approval List</p>
    <table class="table table-striped" id="approval-list">
        <thead>
            <tr>
                <th>ID</th>
                <th>Object Type</th>
                <th>Created By User</th>
                <th>Actor</th>
                <th>Status</th>
                <th>Created Date</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</apex:page>