Angular datatables ajax pagination using nodejs and mongodb

I’m trying to implement server side pagination in angular datatables but unfortunately I’m completely failed, can some one pls have a look into my code. No product showing in table, how I can initially fill $scope.products array? How I can then use ajax pagination? how I can pass page no, limit? Also pls look into server side function too. Any help would be highly appreciated!

ProductCtrl:

adminApp.controller('CrudCtrl', ['$scope','$compile', 'DTOptionsBuilder', 'DTColumnBuilder', function($scope, $compile, DTOptionsBuilder, DTColumnBuilder ){

$scope.dtOptions = DTOptionsBuilder.newOptions()
        .withOption('ajax', {
         // Either you specify the AjaxDataProp here
        // dataSrc: 'data',
         url: '/api/product/list',
         type: 'GET'
     })
     // or here
        .withDataProp('data')
        .withOption('aLengthMenu', [5, 10, 20, 50, 100,500])
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withPaginationType('full_numbers')
        .withOption('createdRow', function(row, data, dataIndex) {
              $compile(angular.element(row).contents())($scope);
       })
    $scope.dtColumns = [
        DTColumnBuilder.newColumn('_id').withTitle('ID').notVisible(),
        DTColumnBuilder.newColumn('title').withTitle('Title'),
        DTColumnBuilder.newColumn('description').withTitle('Description'),
        DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
            .renderWith(function(data, type, full, meta) {
                return '<button class="btn btn-warning" ng-click="showModal(' +  data  + ')">' +
                    '   <i class="fa fa-edit"></i>' +
                    '</button>&nbsp;' +
                    '<button class="btn btn-danger" ng-click="deleteItem(' + data+ ')">' +
                    '   <i class="fa fa-trash-o"></i>' +
                    '</button>';
            })
    ];

    $scope.showModal = function (product = null) {
        console.log(product);
    }

    $scope.deleteItem = function(model){
        console.log(product);
    }
}]);    

Product.html

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered table-hover">
    </table>

Product Data from server

{"recordsTotal":23,"recordsFiltered":23,"draw":"1","data":[{"_id":"57262c0a09be8dd4bef212a2","title"
:"Product 1","sale_price":77,"description":"Product description.","__v":0},{"_id":"57262d3609be8dd4bef212a3"
,"title":"Product 2","sale_price":88,"description":"Product 2 description","__v":0},{"_id":"5726310409be8dd4bef212a4"
,"title":"Product 3","sale_price":58,"description":"pppsd","__v":0},{"_id":"57264d2809be8dd4bef212a5"
,"title":"Product 5","sale_price":99,"description":"Product 5","__v":0},{"_id":"57264d3b09be8dd4bef212a6"
,"title":"Product 6","sale_price":888,"description":"Product 6","__v":0}]}

I wan to pass object to showModel() function but getting this erorr:

Error: [$parse:syntax] Syntax Error: Token 'Object' is unexpected, expecting []] at column 19 of the expression [showModal([object Object])] starting at [Object])].
http://errors.angularjs.org/1.5.5/$parse/syntax?p0=Object&p1=is%20unexpected%2C%20expecting%20%5B%5D%5D&p2=19&p3=showModal(%5Bobject%20Object%5D)&p4=Object%5D)

[kevintc]

You can trigger a search by using : dtInstance.DataTable.columns(id).search(text).draw(); where id is the column index and text is a string

You can then monitor the ajax request that is made to the server. Check the following documentation : https://datatables.net/manual/server-side On the server side, you will have to parse the request and then send back the results.

[shahzadthathal]

Hi

I will give it a try.

Thanks