Carregar DataTable clicando em um botão

Boa Tarde pessoa! Estou com o seguinte problema, tenho um DataTable e logo acima dele um botão, e quando clicar nesse botão ele deve carregar esse DataTable.

Segue o trecho do código:

                                   <b:commandButton value="#{msgs.btnAdicionarFone}"
					action="#{pessoaCtrl.actionInserirFone}" styleClass="btn btn-info">
					<f:ajax render="tabeleFone" />
				</b:commandButton>
				<br /> <br />
				<b:dataTable value="#{pessoaCtrl.pessoa.fones}" var="objFone"
					 id="tabeleFone"searching="false" paginated="false"
					fixedHeader="true" scroll-size="400px" scroll-x="false"
					responsive="true" lang="it">

					<b:dataTableColumn label="Número">
						<b:inputText value="#{objFone.numero}" maxlength="11"
							placeholder="Número" style="width: 120px" />
					</b:dataTableColumn>

					<b:dataTableColumn label="Descrição">
						<b:inputText value="#{objFone.descricao}" maxlength="20"
							placeholder="Ex: Casa" style="width: 120px" />
					</b:dataTableColumn>

					<b:dataTableColumn label="Excluir">
						<b:commandButton
							action="#{pessoaCtrl.actionInserirFone(objFone)}"
							icon="glyphicon glyphicon-trash" look="danger" />
					</b:dataTableColumn>
				</b:dataTable>