# Load/Reload the table data from an Ajax source

This module also handles data reloading / loading from an Ajax source:

- If you need to load data, you just have to call the function `dtInstance.changeData(ajax);`.
- If you need to reload the data, you just have to call the function `dtInstance.reloadData();`.

<tabset>

angular.module('showcase.dataReload.withAjax', ['datatables']) .controller('DataReloadWithAjaxCtrl', DataReloadWithAjaxCtrl); function DataReloadWithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.fromSource('data.json') .withOption('stateSave', true) .withPaginationType('full_numbers'); vm.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('ID'), DTColumnBuilder.newColumn('firstName').withTitle('First name'), DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible() ]; vm.newSource = 'data1.json'; vm.reloadData = reloadData; vm.dtInstance = {}; function reloadData() { var resetPaging = false; vm.dtInstance.reloadData(callback, resetPaging); } function callback(json) { console.log(json); } }

data.json
data1.json

[{ "id": 860, "firstName": "Superman", "lastName": "Yoda" }, { "id": 870, "firstName": "Foo", "lastName": "Whateveryournameis" }, { "id": 590, "firstName": "Toto", "lastName": "Titi" }, { "id": 803, "firstName": "Luke", "lastName": "Kyle" }, ... ]
</tabset>