Cannot reinitialise DataTable - AngularJS with datatable

Question

When I combine AngularJS (1.6.x) with jQuery data-tables, I get alert error:

Cannot reinitialise DataTable

First I use AngularJS to bind and fill data-tables, then I try to add Individual column searching (text inputs) feature.

Individual column searching (select inputs)

AngularJS initialize data-tables, but does not give me a handle.

Here is my code:

var app1=angular.module('formvalid', ['ui.bootstrap','ui.utils']);
app1.controller('validationCtrl',function($scope){

    angular.element(document).ready(function () {
        // Setup - add a text input to each footer cell                                      

        $('#example tfoot th').each( function () {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        } );

        console.log('  document ready function, add search by column feature ');

        var table = $('#example').DataTable();

        // Apply the search
        table.columns().every( function () {
            var that = this;

            $( 'input', this.footer() ).on( 'keyup change', function () {
                if ( that.search() !== this.value ) {
                    that
                        .search( this.value )
                        .draw();
                }
            } );
        } );
    });// document ready              

 $scope.data=[[
        "Tiger Nixon",
        "System Architect",
        "Edinburgh",
        "5421",
        "2011\/04\/25",
        "$320,800"
    ]];

    $scope.dataTableOpt = {
//custom datatable options 
// or load data through ajax call also
// "data": $scope.data00, // this is not real binding, the real binding is ui-jq="dataTable" ui-options="dataTableOpt", fill $scope.data

"aLengthMenu": [[10, 50, 100,-1], [10, 50, 100,'All']],
 };  
 });

hoogw · Accepted Answer · 2017-08-23 22:19:37Z

1

demo on codepen.io
demo on jsFiddle

earlier angularjs initialize datatable( must add "retrieve": true, otherwise, will get above error retrieve existing table handle) , but don't get a table handle,

later here, $('#id').DataTable(); will 1) if existing, will retrieve table handle. 2) if not exsiting, will create a new table.

so the solution is

$scope.dataTableOpt = {
  //custom datatable options 
  // or load data through ajax call also
 // "data": $scope.data00, // this is not real binding, the real binding is ui-jq="dataTable" ui-options="dataTableOpt", fill $scope.data
  "retrieve": true,  // angularjs at begining initialize datatable, but don't get a handle to the table, later you want to add search column, you need to get the table handle.
  "aLengthMenu": [[10, 50, 100,-1], [10, 50, 100,'All']],
};

edited Aug 23, 2017 at 22:19

answered Aug 23, 2017 at 17:39

hoogw

5,6071 gold badge46 silver badges37 bronze badges

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

Comments

hoogw · Accepted Answer · 2017-08-30 16:19:47Z

0

codepen : ui-grid (angularjs 1.x) demo

jsFiddle : ui-grid (angularjs 1.x) demo

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection']);

app.controller('MainCtrl', ['$scope', '$http', '$interval', '$q','uiGridConstants', function ($scope, $http, $interval, $q, uiGridConstants) {

I build those demo, is best solution for angularjs 1.x datatable.

angularjs 1.x + jquery(datatables) isn't best solution.

ui-grid is pure angularjs 1.x, is best solution so far.

answered Aug 30, 2017 at 16:19

hoogw

5,6071 gold badge46 silver badges37 bronze badges

Collectives™ on Stack Overflow

Cannot reinitialise DataTable - AngularJS with datatable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related