CODEWITHSUNDEEP
javascriptjqueryangularjsdatatable
Lindemann18
Lindemann18

Reputation: 21

Jquery DataTable Angular

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);
         });

Upvotes: 1

Views: 791

Answers (2)

Dhaval Darji
Dhaval Darji

Reputation: 513

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 :

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

Upvotes: 1

NOBLE M.O.
NOBLE M.O.

Reputation: 194

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.

Upvotes: 0

Related Questions