Angular Datatables REST based per page data with explicit table rendering

Question

I have followed the approach "DataTables: Custom Response Handling" by Fabrício Matté. However, my requirement is to avoid rendering of table's rows and columns via callback. Instead, would like to traverse the current ajax request returned json data and render explicit html (tr/td) to have more control. Due to this, currently i see data shown twice on my table. At the same time, i understand that callback is rendering the page related buttons: prev, 1,2 next etc and click events which i would like to reuse and wan't to avoid custom implementation.

JS:

function notificationsCtrl($scope,$http,$resource, DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.notifications = [];
$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('serverSide', true)
    .withOption('ajax', function(data, callback, settings) {
        // make an ajax request using data.start and data.length
        $http.get('notifications/list?page=' + (((data.start)/10)+1)).success(function(res) {
            // map your server's response to the DataTables format and pass it to
            // DataTables' callback
            callback({
                recordsTotal: 120,
                recordsFiltered: 120,
                data: res
            });
            vm.notifications = res;
        });
    })
    .withDataProp('data') // IMPORTANT¹
    .withOption('processing', true)
    .withPaginationType('full_numbers');

    $scope.dtColumns = [
                        DTColumnBuilder.newColumn('notificationId').withTitle('notificationId'),
                        DTColumnBuilder.newColumn('createUserId').withTitle('createUserId'),
                        DTColumnBuilder.newColumn('Language').withTitle('language')
                      ];

}

HTML: sample but actual will require extra processing for some of the td tags

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered table-hover">
                <thead>
                        <tr>
                            <th>Id</th>
                            <th>Title</th>
                            <th>Language</th>
                            <th>Last Updated</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="notification in wynkCMSToolApp.notifications">
                            <td>{{ notification.notificationId }}</td>
                            <td>{{ notification.title }}</td>
                            <td>{{ notification.Language }}</td>
                        </tr>
                    </tbody>
            </table>

l-lin · Accepted Answer · 2015-11-30 16:19:01Z

1

If you want to render directly in the HTML, consider using the Angular renderer. However, such renderer does not support the server side processing.

So I recommend you use the server side processing along with the columns.render function.

Here an example of using the render function.

answered Nov 30, 2015 at 16:19

l-lin

1,0751 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Datatables REST based per page data with explicit table rendering

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related