Jquery DataTable Angular

Question

Im a big fan of jquery DataTable, but i realize that using AngularJs, it doesnt work, it shows all the data withoug pagination and says "No data available in table Showing 0 to 0 of 0 entries". I have see the website http://l-lin.github.io/angular-datatables/ but i can not make it work, im getting the info from a database. im newbe on angular JS. So basically there's a human way to use jquery datatable with angular and succeed?.

        Arr                 = new Object();
        Arr['Accion']       = "ObtenerDatosPersonal";
        params              = JSON.stringify(Arr);

        var url = 'modulos/personal/funciones.php';
       $http({
            method: "post",
          url: url,
          data: $.param({params:params}), 
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
         }).success(function(data, status, headers, config) {
            $scope.Empleadosmodal = data.Empleados;
            Cantidad              = Empleados.length;

            $('#Empleados').DataTable();
            $("#myModal").modal("show");    
         })/*Success*/
         .error(function(data, status, headers, config) 
         {
            alert("Ha fallado la petición. Estado HTTP:"+status);
         });

check the request in browser dev tools, is it made? Any errors?. You can't use $.param() on a string. Would be best to put your code in a directive where you can use element.Datatable() and there are open source directives already available for datatables — charlietfl
– charlietfl, Commented Apr 30, 2015 at 0:00
There's no error, i can see the entire data on the table, but the jquery datatable doesn't recognoize the data in the table. — Lindemann18
– Lindemann18, Commented Apr 30, 2015 at 0:13

Dhaval Darji · Accepted Answer · 2020-12-07 16:47:24Z

1

After binding or filling data into table, You must use 'ChangeDetectorRef ' to detect the changes into your HTML DOM. And Then Load Your Datatable Method.

Below Are simple solution in steps :

Loading/Binding Dynamic Data Into Local Object For Table
Use Angular's 'ChangeDetectorRef ' library.
Load Datatable Script for your table.

answered Dec 7, 2020 at 16:47

Dhaval Darji

5136 silver badges19 bronze badges

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

1 Comment

Dhaval Darji Over a year ago

If you found my answer useful, then please mark it as answer.

NOBLE M.O. · Accepted Answer · 2015-12-09 11:17:06Z

I'm not very clear about your doubt. But I used Jquery datatable with angularJs with the support of angular datatable. You need to add the following reference in the page in the same order,

<script src="jquery.min.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-datatables.min.js"></script>

Use the table tag like,

        <table id="example" datatable="ng" dt-options="dtOptions" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">

Then add DTOptionsBuilder service to the controller.

app.controller('userController',ListCtrl);
ListCtrl.$inject['$scope', 'DTOptionsBuilder', 'DTColumnBuilder'];
function ListCtrl($scope, DTOptionsBuilder, DTColumnBuilder) {

...............
}

Add the following in the controller function,

$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('responsive', true)
.withOption('bAutoWidth', false)
.withPaginationType('full_numbers')
.withDOM('frtip');

That's all. It worked for me. Please note that,

element.DataTable()

need not to call while using angularJs datatable.

Collectives™ on Stack Overflow

Jquery DataTable Angular

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related