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

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>
share|improve this question
up vote 1 down vote accepted

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.

share|improve this answer

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.