current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite
1

I create data table with ajax in Angular.

The code:

app.controller('WithAjaxCtrl', WithAjaxCtrl);

function WithAjaxCtrl($scope,DTOptionsBuilder, DTColumnBuilder,$http) {

    $scope.dateFrom = {value:new Date()}
    $scope.dateTo ={value:new Date()}

//the http success callback return the data
        var successCallback = function (data, status, headers, config) {
            return data;
        }

//the http error callback 
    var errorCallback = function (data, status, headers, config) {
       alert('fail with status '+status)
    }

//The http fuction
        var getRecord = function () {
            var from =  $scope.dateFrom.value;
            var to = $scope.dateTo.value;
            $http.post('/loadRecord/'+from+'/'+to)
                .success(successCallback).error(errorCallback)
        }

//The data tables function
        $scope.filterByDate=function(){
            vm.dtOptions = DTOptionsBuilder.fromSource(getRecord())
                .withPaginationType('full_numbers');
        }

    var vm = this;
    var from =  $scope.dateFrom.value;
    var to = $scope.dateTo.value;
    vm.dtOptions = DTOptionsBuilder.fromSource(getRecord())
        .withPaginationType('full_numbers').withOption('responsive', true);
    vm.dtColumns = [
        DTColumnBuilder.newColumn('xxxx').withTitle('XXXX),
        DTColumnBuilder.newColumn('yyy').withTitle('YYY),

    ];

}

the HTML code:

  <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns"
                   class="row-border hover"></table>

The $http call work successfully.

But nothing incoming into the table!

I think that nothing return from the function but I dont know where can I put the return with the data.

share|improve this question
up vote 0 down vote accepted

You build the options normally like this

vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withDisplayLength(2);
vm.dtColumnDefs = [
    DTColumnDefBuilder.newColumnDef(0),
    DTColumnDefBuilder.newColumnDef(1).notVisible(),
    DTColumnDefBuilder.newColumnDef(2).notSortable()
];

then retrieve the data that needs to be passed on to the table with $http call

$http.post(url,params).then(function success(response) {
                $scope.data = response.data;
            });

and finally use ngRepeat to create your table

<tr ng-repeat="obj in data">
        <td>{{ obj.id }}</td>
        <td>{{ obj.xxxx }}</td>
        <td>{{ obj.yyyy }}</td>
    </tr>

Remember to fix the string literals in the last statement in ctrl

vm.dtColumns = [
    DTColumnBuilder.newColumn('xxxx').withTitle('XXXX),
    DTColumnBuilder.newColumn('yyy').withTitle('YYY),

];

Here 'XXXX should 'XXXX'

Similar example is in the datables docs

share|improve this answer
    
It fell with this error err link What can I do? – user3937548 May 18 '15 at 9:19
1  
Remove showcase keyword from html – kachhalimbu May 18 '15 at 9:22
1  
Please update your question with updated code – kachhalimbu May 18 '15 at 10:08
    
It Work, but it is takes time to load the data – user3937548 May 18 '15 at 10:23

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.