current community

your communities

more stack exchange communities

Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 2 down vote favorite

I'm using angular-datatables with server side processing, and it is not allowing me to perform sorting on columns.

This is my HTML:

<table class="table table-striped table-bordered" datatable="" dt-column-defs="dtColumnDefs" dt-options="dtOptions">
    <thead>
        <tr>
            <th translate>NAME</th>
            <th translate>BASIC_UNIT</th>
            <th translate>STATUS</th>
        </tr>
    </thead>
</table>

This is my JS in the corresponding controller:

  $scope.dtOptions = DTOptionsBuilder.newOptions()
    .withBootstrap()
    .withOption('order', [0, 'asc'])
    .withOption('ajax', {
      url: 'path/to/server/resource',
      type: 'POST'
    })
    .withDataProp('data')
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withPaginationType('full_numbers');

  $scope.dtColumnDefs = [
    DTColumnDefBuilder.newColumnDef(0)
    .withOption('sName', 'name')

    DTColumnDefBuilder.newColumnDef(1)
    .withOption('sName', 'basic_unit')
    .withOption('bSearchable', false)
    .withOption('bSortable', false),

    DTColumnDefBuilder.newColumnDef(2)
    .withOption('sName', 'status')
    .withOption('bSearchable', false)
    .withOption('bSortable', false)
  ];

Does anyone know if I'm missing something?.

share|improve this question

1 Answer 1

up vote 0 down vote

You have server-side processing enabled with .withOption('serverSide', true). In server-side processing mode filtering, paging and sorting calculations are all performed by a server.

See full list of parameters sent by the client in server-side processing mode. Among others, there are:

search[value] Global search value

columns[i][search][value] Search value to apply to this specific column.

If you're not handling these parameters, then it will appear as if no sorting is performed.

The solution would be to either implement filtering, paging and sorting on the server-side or switch to client-side processing mode. In client-side processing mode data can still be retrieved from the server, but filtering, paging and sorting will be performed by jQuery DataTables plug-in.

See Processing modes for more information.

share|improve this answer
    
I am aware of what you just explained, I'm indeed sorting, filtering, and paging on the server. The problem is that my table headers are not allowing "clicks" to sort the columns. –  lcrespofalco Jul 10 at 21:32
    
@lcrespofalco, understood, that wasn't clear from the question. Otherwise your DataTables-related code looks fine. I assume you understand then, that only "Name" column is sortable. Also translate attribute on <th> looks out of place, are you sure it's supposed to be there? –  Gyrocode.com Jul 10 at 21:38
    
Yep I think my question wasn't that clear. @gyrocode.com, yes I only want to sort by name, and yep "translate" is OK there, it is a directive from angular-translate for I18n. I haven't tried removing that directive, could that be the reason? –  lcrespofalco Jul 10 at 21:42
    
@lcrespofalco, angular-translate library may be altering the headers which could detach click event handlers, removing translate is worth a try. As a workaround, you can wrap text that needs to be translated in a <span translate></span> instead. –  Gyrocode.com Jul 10 at 21:45
    
thanks @gyrocode.com, I'll give it a try and let you know, but it is weird that without server side processing everything was working well, even using that directive on headers. –  lcrespofalco Jul 10 at 21:47

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.