How to display the data on clicking of a button in salesforce Lightning

Component
----------
<aura:component implements="force:appHostable"  controller="DataList">
    <aura:attribute name="accdata" type="List"/>
    <ui:button aura:id="button" label="show" press="{!c.doInit}"/>
     <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
    <thead>
      <tr class="slds-text-heading--label">
        <th scope="col"><div class="slds-truncate" title="ID">ID</div></th>
        <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
         <th scope="col"><div class="slds-truncate" title="Site">Site</div></th>
   
      </tr>
    </thead>
    <tbody>
      <aura:iteration items="{!v.accdata}" var="account">
        <tr>
          <th scope="row"><div class="slds-truncate" title="{!account.Id}">{!account.Id}</div></th>
          <td><div class="slds-truncate" title="{!account.Name}">{!account.Name}</div></td>
          <td><div class="slds-truncate" title="{!account.Type}">{!account.Site}</div></td>
       
        </tr>
      </aura:iteration>
    </tbody>
  </table>

     

</aura:component>

controller
----------

({
  // Fetch the accounts from the Apex controller
  doInit: function(component) {
    var action = component.get('c.getAccountData');
    // Set up the callback
    var self = this;
    action.setCallback(this, function(actionResult) {
     component.set('v.accdata', actionResult.getReturnValue());
    });
    $A.enqueueAction(action);
  }
})

Apex class
----------
public class DataList {
    @auraEnabled
    public static List<Account> getAccountData(){
        List<Account> acclist=new List<Account>();
        accList=[select Id,Name,Site from Account];
        System.debug(accList);
        return accList;
     
    }

}


Lightning Application
-----------------------------
<aura:application  extends="force:slds">
    <c:AccountData/>
</aura:application>