l-lin / angular-datatables Goto Github PK

Hi,
Is it possible add a new row or edit and update a row with angular data tables?. I have a requirement, select a row and edit it fields and update.

Currently there doesn't appear to be a way to customize the

Loading...

Currently, the default version is 0.0.1, with only up to 0.0.2 available.

despite setting recordsTotal and recordsFiltered as per datatables documentation, the paging part of the control only shows 1 page.

datatables1.10

Hi

When I use your code in USAGE WITH OPTIONS, in my code, it breaks.

TypeError: undefined is not a function
at Object.angular.module.factory._showLoading [as showLoading

Also

I have to specify the 2 builders else they are null.
[ '$scope', '$resource', 'DTOptionsBuilder', 'DTColumnDefBuilder',
function ( $scope, $resource, DTOptionsBuilder, DTColumnDefBuilder ) {

Can you help?

I am trying to figure it out how to find out selected row value. For example, one of my table column has an ID and I want to return it after selecting the selected row(s). I can't see how to get it in your angular version. Could you point me in the right direction if that is even possible?

Hi

Trying to set this up, I've added the files and configured it to work in the module but when I add datatable="ng" to my table and reload I get the following error.

TypeError: Object doesn't support property or method 'DataTable'
at _renderDataTableAndEmitEvent (https://localhost:44304/scripts/angular-datatables.js:323:11)
at Anonymous function (https://localhost:44304/scripts/angular-datatables.js:330:13)
at Anonymous function (https://localhost:44304/scripts/angular.js:14014:11)
at completeOutstandingRequest (https://localhost:44304/scripts/angular.js:4300:7)
at Anonymous function (https://localhost:44304/scripts/angular.js:4601:7)undefined
[app] [HT Error] Object doesn't support property or method 'DataTable'[object Object]

It comes from line 323 in angular-datatables.js which contains:
var oTable = $elem.DataTable(options);

any ideas?

Thanks

Hi,

How can I delete an item from used array with angular-way approach or edit one of items? When I remove an item from array which used in ng-repeat then all records disappear.

Regards,
nerezo.

Hi,
How could we render table with data from $http service?

When data is returned in the following format:
{
"data": [
{
"id": 408,
"time_added": "15th Aug 14"
}
],
"draw": 1,
"recordsTotal": 570,
"recordsFiltered": 570
}

It is only processing the page numbers, it is not processing the data.
When data is returned as an array:
[
{
"id": 408,
"time_added": "15th Aug 14"
}
]

It's processing it well.

I'm trying to use a promise as a data source, and reload when another event happens. My initiation code is as follows:

$scope.dtOptions = DTOptionsBuilder.fromPromise(Appointment.getPromise());

This does return a promise and the table is built correctly. However, when another action happens and I run:

$scope.dtOptions.reloadData();

I get an error that undefined is not a function. If I output $scope.dtOptions to the console, I get the following:

and I do not see any reloadData() method listed.

How could we handle multiple data tables in a single page using angular-datatables?

So that we won't need to define Bootstrap options each time we render a new datatable.

hi, i want to use angular-datatables, but i dont know how to set the datasource to table.
the api and the example show how to use fromSource and fromFnPromise, can i just use $scope.options.xx = json array?

Hello,

Is it possible to construct complex header? Something like:

If yes, do we have to use the classic rowspan and colspan or can we use the DTColumnBuilder ?

Thanks in advance!

I want to add edit and delete icons in my table so that user can easily edit as well as delete records. When user click on edit icon they should be navigated to edit page

Definitely an interesting project.

Do you have any examples demonstrating row-click events as this prior attempt
at combining angular and datatables shows?

https://groups.google.com/forum/#!topic/angular/vM2DEMK_NMA

(click on "price" column, and item on angular scope is updated)
http://jsfiddle.net/zdam/7kLFU/

The following two methods of setting the pagination type to full_numbers has this effect:

$scope.dtOptions = {
  ...
  pagingType: 'full_numbers', // DT 1.10+ way
  language: {
    paginate: {
      first: "«",
      last: "»",
      next: "→",
      previous: "←"
    }
  }
  ...
}

$scope.dtOptions = DTOptionsBuilder.newOptions()
  ...
  .withOption('pagingType', 'full_numbers') // Also DT 1.10+ way
  ...
  .withOption('language', {
    paginate: {
      first: "«",
      last: "»",
      next: "→",
      previous: "←"
    }
  });

Resulting HTML:

<!-- DT 1.10+ pagingType: 'full_numbers' method -->

<div class="dataTables_paginate paging_full_numbers" id="dtTable_paginate">
  <a class="paginate_button first disabled" aria-controls="dtTable" data-dt-idx="0" tabindex="0" id="dtTable_first">«</a>
  <a class="paginate_button previous disabled" aria-controls="dtTable" data-dt-idx="1" tabindex="0" id="dtTable_previous">←</a>
  <span>
    <a class="paginate_button current" aria-controls="dtTable" data-dt-idx="2" tabindex="0">1</a>
  </span>
  <a class="paginate_button next disabled" aria-controls="dtTable" data-dt-idx="3" tabindex="0" id="dtTable_next">→</a>
  <a class="paginate_button last disabled" aria-controls="dtTable" data-dt-idx="4" tabindex="0" id="dtTable_last">»</a>
</div>

Whereas using the DTOptionsBuilder.newOptions().withPaginationType('full_numbers') gives this as a result:

Resulting HTML:

<!-- DtOptionsBuilder.newOptions().withPaginationType('full_numbers') -->

<div class="dataTables_paginate paging_bootstrap" id="dtTable_paginate">
  <ul class="pagination">
    <li class="prev disabled"><a href="#">← ←</a></li>
    <li class="active"><a href="#">1</a></li>
    <li class="next disabled"><a href="#">→ → </a></li>
  </ul>
</div>

Notice that the "First" and "Last" links are missing. Also notice that the "Next" and "Previous" links have their own ← and →, respectively, causing the language option to effectively show two of them on both buttons. To only show one, you have to set next: "", previous: "" for the paginate language object.

The resulting HTML snippets for both were pulled straight from Chrome Element Inspector.

Is there a way I can set this up so to optimize it for use with a larger database source? I'm talking about AJAX requests to update pagination length, filtering, sorting of columns, etc.

Sorry if this doesn't warrant an issue - I don't really know how else to ask my question heh.

Hello @l-lin ,

I have a scenario that when I click on search button on search criteria panel, the data in datatable will be refreshed.

My code look like this :

controller('AgiMConfigController', function($scope, $location, $compile, AgiMConfigService, $routeParams, DTOptionsBuilder, DTColumnBuilder){
        "use strict";
        $scope.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('ajax', {
                "contentType": "application/json; charset=utf-8",
                dataType: "json",
                "url": "service/agimconfig/",
                "type": "POST",
                "data": function ( d ) {
                    console.log("data");
                    d.search = $scope.searchData || {}; //search criteria
                    return JSON.stringify(d);
                }
            })
            .withOption('processing', true)
            .withOption('serverSide', true)
            .withOption('filter', false)
            .withPaginationType('full_numbers');

        $scope.dtColumns = [
            DTColumnBuilder.newColumn('configKey').withTitle('Config Key'),
            DTColumnBuilder.newColumn('configValue').withTitle('Config Value'),
            DTColumnBuilder.newColumn('configGroup').withTitle('Config Group'),
            DTColumnBuilder.newColumn('description').withTitle('Description'),
            DTColumnBuilder.newColumn('remark').withTitle('remark')
        ];

        $scope.$on('event:dataTableLoaded', function(event, data) { 
            console.log('event:dataTableLoaded:'+data); 
            $scope.tableId = data.id;

            $scope.search = function() {
                $scope.searchData = angular.copy($scope.criteria);
                $scope.dtOptions.reloadData();
            };
        });
    }).
...

The problem is reloadData() doesn't work.

So, I try to implement in other way. It work correctly.
My code look like this :

controller('AgiMConfigController', function($scope, $location, $compile, AgiMConfigService, $routeParams, DTOptionsBuilder, DTColumnBuilder){
        "use strict";

        console.log('test AgiMConfigController');


        $scope.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('ajax', {
                "contentType": "application/json; charset=utf-8",
                dataType: "json",
                "url": "service/agimconfig/",
                "type": "POST",
                "data": function ( d ) {
                    console.log("data");
                    d.search = $scope.searchData || {}; //search criteria
                    return JSON.stringify(d);
                }
            })
            .withOption('processing', true)
            .withOption('serverSide', true)
            .withOption('filter', false)
            .withPaginationType('full_numbers');

        $scope.dtColumns = [
            DTColumnBuilder.newColumn('configKey').withTitle('Config Key'),
            DTColumnBuilder.newColumn('configValue').withTitle('Config Value'),
            DTColumnBuilder.newColumn('configGroup').withTitle('Config Group'),
            DTColumnBuilder.newColumn('description').withTitle('Description'),
            DTColumnBuilder.newColumn('remark').withTitle('remark')
        ];

        $scope.$on('event:dataTableLoaded', function(event, data) { 
            console.log('event:dataTableLoaded:'+data); 
            $scope.tableId = data.id;

            $scope.search = function() {
                $scope.searchData = angular.copy($scope.criteria);
                console.log("search");
                $('#'+$scope.tableId).DataTable().ajax.reload();
            };
        });
    }).
...

In my opinion, it very complicated. I have no idea how to implement this scenario in other simple way. Do you have suggestions?

Thank you.

I'm assuming this refers to these options?

https://datatables.net/reference/option/

I'm trying to set autoWidth to false but using value false with either of the following keys: 'autoWidth', 'bAutoWidth' doesn't work.

Or is this not something that can be affected? The api doesn't really make this clear.

Hi!

i want to set sort Descending for ID column , but i don't know how to set . Could you give me a favor?

p/s: I use the example "Angular way" from http://l-lin.github.io/angular-datatables/#/angularWay

When trying to manually change the records per page, nothing is happening.

$scope.dtOptions.withDisplayLength(5);

Even running $scope.$apply() does nothing.

Any thoughts?

Hey Louis,

I have a scenario where my DTColumns are defined by rules on server side, that returns an array with columns. I'm getting a error because datatables rendering cannot wait for columns definition (like the behaviour support for data) arriving after controller execution.

My ideia is to implement support to define columns using promises, alongside "static" way, through a delay on datatables rendering.

What you think? Any advices?

Just noticed this from Angular API docs 😢:

Angular Namespaces $ and $$ To prevent accidental name collisions with your code, Angular prefixes names of public objects with $ and names of private objects with $$. Please do not use the $ or $$ prefix in your code.

The offending services are:

• $DTBootstrapTableTools
• $DTBootstrapColVis
• $DTBootstrap
• $DTDefaultOptions
• $DTPropertyUtil

Is it possible to set a default column for initial sorting?

Hi,

Since this module does not provide all the datatables API, at least as far as I used. Is there any way to expose the datatable jquery object to the angular part code? I did some changes in _renderDataTableAndEmitEvent function

, _renderDataTableAndEmitEvent = function ($elem, options, $scope) {
          var oTable = $elem.DataTable(options);
          $scope.$emit('event:dataTableLoaded', { id: $elem.attr('id'), dt:oTable  });
          return oTable;

Then if there is any angular controller/service observing the event:dataTableLoaded event, it will get oTable datatables jquery object when the datatable is rendered. Then all the datatables API can be used in angular part as well.
The scenario I bring this because I need to use some datatables API according to user interactions. Please let me if there are something missing for me not fully understand how to use datatables API in your current v0.1.0 module

Hi!
I want to use DTColumnDefBuilder , buit don't know how to update my angular-datables 'version to the DEV version with Bower : https://rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"

Hello,

Will it be possible to filter single columns, like in the jQuery plugin?

https://datatables.net/examples/api/multi_filter.html

Thank you.

How can I handle empty result sets? I'm using $resource to load my data with an Ajax call. When data is returned then it all works fine. But when I get no data, then the table keeps showing "Loading...".

I have HTML that looks like this:

<table datatable="ng" dt-options="dtOptions" class="row-border hover">
    <thead>
        <tr>
            <th>date (ISO)</th>
            <th>name</th>
            <th>email</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr dt-rows="" ng-repeat="user in users">
            <td>{{ user.date }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
            <td>actions</td>
        </tr>
    </tbody>
</table>

In my controller I have this:

// Init empty var
$scope.users = [];
//$scope.users = {}; Doesn't work either

I want to somehow init the table with an empty variable. But when I use a variable like that then it keeps saying "Loading...".

Is there a way to solve this problem?

Every single one of your code snippets/demos on the site https://l-lin.github.io/angular-datatables give me the below error.

http://puu.sh/af4Am/9be436ab31.png

Google search gives me nothing. Do you think you could relocate the code somewhere that won't give that error? I get it on any browser I use.

Integration with responsive plug-in of DataTables:
http://datatables.net/extensions/responsive/

Hey @l-lin

After loading data with DTOptionsBuilder.fromSource(), I have to format some cell element. However, I didn't find any callback function.

For Example.

DTColumnBuilder.newColumn('name').withTitle('example').renderWith( (data)-> 
    "<button class='btn example'>#{data}</button>")

After that, I would use the code below to make this button as a modal button

$('.example').bootstrap()

Since the data is loaded with AJAX and that script would not work as well.

Is there any way to solve this issue?

thx

is it possible to implement individual column searching with text inputs like this example : http://www.datatables.net/examples/api/multi_filter.html

if so, can you just explain it in short how it can be done ?

thanks for this nice directive.

Why are they missing in my app. I copied your sampler code

Currently, with Bootstrap integration, angular-datatables overrides the TableTool's classes so that it uses Bootstrap classes.
We should be able to customize our own classes, like for example, instead of btn-default we want btn-primary.

API docs reflect dev branch, yet bower install points to master.

how to use [fnServerParams], Please help me.

Is current version of angular-datatables compatible with Data Tables v1.10?

Hi !

I have the code below in my project :

$scope.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withPaginationType(2)
.withOption('order', [0, 'desc']);


The withPaginationType and withPaginationType are working good. However the withOption('order', [0, 'desc']) is not working . And i don't know what happen with my code, i cannot fix it.
Could you give me some advice ?

I starting using this framework, but i found out that i can' acess the DataTables api:

    $scope.dtOptions = DTOptionsBuilder.fromFnPromise($scope.getData()).withBootstrap()
   .withOption('footerCallback', function (row, data, start, end, display) {
        var api = this.api(), data;

the api varable is a empty array

Hi,

I just start to use both datatables and this angular module (wrapper?). Thanks for the current progress of this module.
The implementation of updating data in angular way in current version v0.1.0, only works for adding data to the previous datatable copy. If the data is changed, or the element in the data array reference to different data object, it will still have the previous data array copy in the datatable.
I try to go through the source code to find solution for this case, but only fixed it in heavily hack way :(

var NGRenderer = function (options) {
        return {
          options: options,
          render: function ($scope, $elem) {
            var finishInit = false;
            var firstCallTimerFlag = false;
            ...
            parentScope.$watch(ngRepeatAttr, function (newValue,oldValue) {

              if (oTable && alreadyRendered && !_isDTOldVersion(oTable) && !finishInit) {
                oTable.ngDestroy();
              }else if(finishInit){// New Hack
                  oTable.clear().destroy();
                  alreadyRendered = true;
                  finishInit = false;
                  firstCallTimerFlag = false;
              }
              // This condition handles the case the array is empty
              if (firstCall) {
                firstCall = false;
                firstCallTimerFlag = true;// New Hack
                $timeout(function () {
                  if (!alreadyRendered) {
                    oTable = _doRenderDataTable($elem, _this.options, $scope);
                    alreadyRendered = true;
                  }
                  finishInit = true;// New Hack
                }, 1000, false);  // Hack I'm not proud of... Don't know how to do it otherwise...
              } else if(!finishInit){
                $timeout(function () {
                  oTable = _doRenderDataTable($elem, _this.options, $scope);
                  alreadyRendered = true;
                  if(!firstCallTimerFlag){ // New Hack
                      finishInit = true;
                  }
                }, 0, false);
              }
            }, true);
          }
        };
      };

Basically I instance two flags: finishInit and firstCallTimerFlag, finishInit is for skiping
oTable.ngDestroy() function to clear the data in the current datatable and reset some initial state falg to make the second time _doRenderDataTable() function still be called.
Moreover with firstCallTimerFalg, it can make after _doRenderDataTable() function, the whole update data process will not be triggered again to restore all the data from previous copy in datatable.

PS: As far as I can understand the problem here is the timing issue as the comment described. Do you have any more information about this timing issue? For example which part of the datatable rendering cause it. Please document this issue for other contributor to notice :)

Hi Loius

calling an ng-include for demo WITH OPTIONS doesnt workl

<div data-ng-include="'/scripts/angular/appComponents/interactive/subComponents/worklist/ajsDatatables/ajsDatatablesWorklist.tmpl.html'" ></div>

----------------------------
        <div class="devAjsDatatablesContainer" data-ng-if="ajsdt_with_options" >
aaa2
{{ dtOptions | json }}
            <table datatable="" class="dataTable" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="row-border hover">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>First name</th>
                    <th>Last name</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>Foo</td>
                    <td>Bar</td>
                </tr>
                <tr>
                    <td>123</td>
                    <td>Someone</td>
                    <td>Youknow</td>
                </tr>
                <tr>
                    <td>987</td>
                    <td>Iamout</td>
                    <td>Ofinspiration</td>
                </tr>
                </tbody>
            </table>
        </div>

                    var doWithOptions =
                        function () {

                            $scope.ajsdt_with_options = true;

                            $scope.dtOptions = DTOptionsBuilder.newOptions()
                                .withPaginationType('full_numbers')
                                .withDisplayLength(2)
                                .withDOM('pitrfl');

                            $scope.dtColumnDefs = [
                                DTColumnDefBuilder.newColumnDef(0).notSortable(),
                                DTColumnDefBuilder.newColumnDef(1).notVisible(),
                                DTColumnDefBuilder.newColumnDef(2)
                            ];
                        }

i cant understand how to include with angular project i got an error aoColumns[srcCol] is undefined how write a code in controller

Hello @l-lin ,

I use ajax option to retrieve data from server.
My code look like this :

controller('AgiMConfigController', function($scope, $location, $compile, AgiMConfigService, $routeParams, DTOptionsBuilder, DTColumnBuilder){
        "use strict";
        $scope.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('ajax', {
                "contentType": "application/json; charset=utf-8",
                dataType: "json",
                "url": "service/agimconfig/",
                "type": "POST",
                "data": function ( d ) {
                    console.log("data");
                    d.search = $scope.searchData || {}; //search criteria
                    return JSON.stringify(d);
                }
            })
            .withOption('processing', true)
            .withOption('serverSide', true)
            .withOption('filter', false)
            .withPaginationType('full_numbers');

        $scope.dtColumns = [
            DTColumnBuilder.newColumn('configKey').withTitle('Config Key'),
            DTColumnBuilder.newColumn('configValue').withTitle('Config Value'),
            DTColumnBuilder.newColumn('configGroup').withTitle('Config Group'),
            DTColumnBuilder.newColumn('description').withTitle('Description'),
            DTColumnBuilder.newColumn('remark').withTitle('remark')
        ];
    }).
...

If server is not available, DataTable will show some ugly alert box on the screen. In DataTable forum they say DataTable use internal function '_fnLog()' to handle any error. To prevent alert dialog, they suggest to use:

$.fn.dataTableExt.sErrMode = 'throw';

But if use this setting, _fnLog() will throw an error exception and stop doing anything. The problem is if I use option processing=true, processing dialog will still appear and the rest of javaScript will not execute. So, do you have suggestions or is it possible to custom _fnLog() directly?

Thank you.

Hi, I'm using:

angular 1.2.2
Datatables 1.10.0
jQuery 1.10
fnReloadAjax.js

and following the Load/Reload the table data from an Ajax source example and keep getting the following error when attempting to reload the datatable:

Error: Reload Ajax not supported. Please use the plugin "fnReloadAjax" (https://next.datatables.net/plug-ins/api/fnReloadAjax) or use a more recent version of DataTables (v1.10+)

Any help would be greatly appreciated.

Completly remove DataTables v1.9.4 options and functions from the module and use the new API instead.

Hi,

I'm observing a refresh/update problem while using the component in the "angular way", it seems that the component is storing an internal copy of the data and if I update the original source variable I got a table with the content of the new and old rows.

The behaviour is strange as if I update the variable used for the datatable the showed results are fine, however as soon as I search or sort a column the old data appears out of the blue and if the set is updated again I got the new rows at the beginning and the old ones at the end, after that if I search only the old data is displayed.

Maybe there is a way of clearing the table prior update or something similar I'm skipping.

Thanks for your support.

Hi i want to ge able to reload my table when the dtOption change :

http://plnkr.co/edit/7UAunYtUezmYgJwDBwM4
I add a button that call a reload function :

  $scope.reload = function(){
  $scope.dtOptions = DTOptionsBuilder.fromPromise(simpleFactory1.getData()).withPaginationType('full_numbers');
$scope.dtColumns = [
  DTColumnBuilder.newColumn('id').withTitle('ID'),
  DTColumnBuilder.newColumn('firstName').withTitle('First name'),
  DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
];
}

This function search data from a new service : simpleFactory1

The table didn't refresh with new data . Is this normal ?

Thanks for your help .