Custom datatable info in angularjs

Question

I am using angular and datatables together. One of my requirement is to customize the table info that shows the number of entries. It is just not a text update which I could do using the language configuration of datatable, but I need to move it to a div outside the table.

I see this on the forum, but not sure how to do it in angularjs. This is for pagination, but still I can use this for .dataTables_info .

Pagination control outside datatable

 $(document).ready(function() {
     $("#example").dataTable(); 
     $("#NewPaginationContainer").append($(".dataTables_paginate"));
 });

Answer 1

As "Mr White" points out, you are asking for problems if you are using angularjs and dataTables the "jQuery way" in the same project. Though it is possible, you will face race issues and broken functionality as soon as you try to use dataTables more advanced features such as column rendering. You should really consider using Angular dataTables , the angular directives for jQuery dataTables.

Then this said, even though you are using jQuery dataTables with or without directives, you would need to do this in a $timeout , not in a callback such as initComplete() . That will sometimes fail since angular not nessecarily has finished its business when dataTables has.

Also, the solution you are referring to is not quite right. Have you checked the link in the answer? It leads to something completely else. The correct way would be :

$timeout(function() {
   $('.dataTables_info')  
    .detach()
    .appendTo('#NewPaginationContainer')
})   

demo -> http://plnkr.co/edit/VHYTFcng0A4w2ipJ7GX5?p=preview

The demo is using angular dataTables, so you can see the difference, but even though you are not using the directives, you should use the above approach.