数据没有添加到Jquery DataTables？

Question

So I am trying to build an app using AngularJS. I am trying to create a table to display contact information with info being populated in different rows. I also want to be able to add new contacts to that table. Here is what the table looks like: image of contact table .

This is the form to add new contacts when you press the "Add Row" button: image of "add a contact" form .

The HTML code I will show is part of a partial template so if you try to run it, it will be unstyled. If you look in the javascript portion, the greyed out areas are different scenarios I would try to force the information. I've been working to solve this solution all day, and I can't seem to find the solution. Any advice on what I could possibly be doing wrong in my code? Here is the code:

 'use strict'; /* Controllers */ angular.module('app', []) .controller('TableWithDynamicRowsCtrl', ['$scope', function($scope) { var table = $('#tableWithDynamicRows'); $scope.options = { "sDom": "<'table-responsive't><'row'<p i>>", "destroy": true, "scrollCollapse": true, "oLanguage": { "sLengthMenu": "_MENU_ ", "sInfo": "Showing <b>_START_ to _END_</b> of _TOTAL_ entries" }, "iDisplayLength": 5 }; $scope.contact = {}; $scope.addContact = function(){ /*$scope.contacts = {'name': $scope.contact.name, 'company': $scope.contact.company, 'address': $scope.contact.address, 'city': $scope.contact.city, 'state': $scope.contact.state, 'zip': $scope.contact.zip, 'email': $scope.contact.email, 'phone': $scope.contact.phone, 'notes': $scope.contact.notes, 'status': $scope.contact.status};*/ $scope.employees.push({name: $scope.name, company: $scope.company, address: $scope.address, city: $scope.city, state: $scope.state, zip: $scope.zip, email: $scope.email, phone: $scope.phone, notes: $scope.notes, status: $scope.status}); $scope.contacts = {}; for(var i in $scope.employees){ console.log($scope.employees[i]); } $('#addNewAppModal').modal('hide'); }; $scope.showModal = function() { $('#addNewAppModal').modal('show'); } $scope.addApp = function() { table.dataTable().fnAddData([ $("#appName").val(), $("#appCompany").val(), $("#appAddress").val() + $("#appCity").val() + ',' + $("#appState").val() + $("#appZip").val() , /* $("#appCity").val(), $("#appState").val(), $("#appZip").val(),*/ $("#appEmail").val(), $("#appPhone").val(), $("#appNotes").val(), $("#appStatus").val() ]); } $scope.employees = [ { name: "Donald Trump", company: "Being President", address: "Trump Tower", city: "NYC", state: "NY", zip: "77093", email: "iamthebest@gmail.com", phone: "(713) 226-2462", notes: "Tax", status: "Active" }, { name: "Dora the Explorer", company: "Exploring the World", address: "Nickelodian", city: "Santa Fe", state: "NM", zip: "77093", email: "theoutback@gmail.com", phone: "(713) 226-2462", notes: "Education", status: "Inactive"}, { name: "Harry Potter", company: "Hogwarts", address: "3800 Hopper Rd", city: "London", state: "England", zip: "77093", email: "pottertheson@gmail.com", phone: "(713) 226-2462", notes: "Education", status: "Active"}, { name: "Lily Potter", company: "Housewife", address: "3800 Hopper Rd", city: "Beyond the Grave", state: "Underworld", zip: "77093", email: "potterthemother@gmail.com", phone: "(713) 226-2462", notes: "Bookkeeping", status: "Inactive"}, { name: "James Potter", company: "Tormenting Snape", address: "Hogwarts Blvd", city: "Beyond the Grave", state: "Underworld", zip: "77093", email: "potter@gmail.com", phone: "(713) 226-2462", notes: "Tax", status: "Inactive"}, { name: "Severus Snape", company: "Professor at Hogwarts", address: "Betrayal St", city: "London", state: "England", zip: "77093", email: "ilovelily@gmail.com", phone: "(713) 226-2462", notes: "Education", status: "Inactive"}, ]; }]) .controller('TableWithExportOptionsCtrl', ['$scope', function($scope) { var table = $('#tableWithExportOptions'); $scope.options = { "sDom": "<'exportOptions'T><'table-responsive't><'row'<p i>>", "destroy": true, "scrollCollapse": true, "oLanguage": { "sLengthMenu": "_MENU_ ", "sInfo": "Showing <b>_START_ to _END_</b> of _TOTAL_ entries" }, "iDisplayLength": 5, "oTableTools": { "sSwfPath": "assets/plugins/jquery-datatable/extensions/TableTools/swf/copy_csv_xls_pdf.swf", "aButtons": [{ "sExtends": "csv", "sButtonText": "<i class='pg-grid'></i>", }, { "sExtends": "xls", "sButtonText": "<i class='fa fa-file-excel-o'></i>", }, { "sExtends": "pdf", "sButtonText": "<i class='fa fa-file-pdf-o'></i>", }, { "sExtends": "copy", "sButtonText": "<i class='fa fa-copy'></i>", }] }, fnDrawCallback: function(oSettings) { $('.export-options-container').append($('.exportOptions')); $('#ToolTables_tableWithExportOptions_0').tooltip({ title: 'Export as CSV', container: 'body' }); $('#ToolTables_tableWithExportOptions_1').tooltip({ title: 'Export as Excel', container: 'body' }); $('#ToolTables_tableWithExportOptions_2').tooltip({ title: 'Export as PDF', container: 'body' }); $('#ToolTables_tableWithExportOptions_3').tooltip({ title: 'Copy data', container: 'body' }); } }; }]); /* .controller('AddContactsCtrl', ['$scope', function($scope) { $scope.contact = {}; $scope.addContact = function($scope.employees){ $scope.employees.push($scope.contact); $scope.contact = {}; }; }]);*/ 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- START PANEL --> <div class="panel panel-transparent" ng-controller="TableWithDynamicRowsCtrl"> <div class="panel-heading"> <div class="panel-title"> </div> <div class="pull-right"> <div class="col-xs-12"> <button id="show-modal" class="btn btn-primary btn-cons" ng-click="showModal()"><i class="fa fa-plus"></i> Add row</button> </div> </div> <div class="pull-left"> <div class="col-xs-12"> <form class="search-container" id="tableWithSearch" action="//llamaswill.tumblr.com/search"> <input id="search-box" type="text" class="search-box" name="q" ng-model="searchText"/> <label for="search-box"><span class="search-icon"><i class="pg-search"></i></span></label> <input type="submit" id="search-submit" /> </form> </div> </div> <div class="clearfix"></div> </div> <div class="panel-body"> <table class="table table-hover demo-table-dynamic" id="tableWithDynamicRows" ui-jq="dataTable" ui-options="options"> <thead> <tr> <th>Name</th> <th>Company</th> <th>Address</th> <th>Email</th> <th>Phone</th> <th>Notes</th> <th>Status</th> </tr> </thead> <tbody> <tr ng-repeat="employee in employees | filter:searchText"> <td class="v-align-middle"> <p><span data-letters="{{ employee.name | limitTo: 1 }}" id="avatar" onload="return ran_col()" onmouseover="return ran_col()"></span>{{ employee.name }}</p> </td> <td class="v-align-middle"> <p>{{ employee.company }}</p> </td> <td class="v-align-middle"> <p>{{ employee.address }}<br> {{ employee.city }}, {{ employee.state }} {{ employee.zip }}</p> </td> <td class="v-align-middle"> <p>{{ employee.email }}</p> </td> <td class="v-align-middle"> <p>{{ employee.phone }}</p> </td> <td class="v-align-middle"> <p> <a href="" class="btn btn-tag">{{ employee.notes }}</a> </p> </td> <td class="v-align-middle"> <p>{{ employee.status }}</p> </td> </tr> </tbody> </table> </div> </div> <!-- END PANEL --> </div> <!-- END CONTAINER FLUID --> <!-- MODAL STICK UP --> <div class="modal fade stick-up" id="addNewAppModal" tabindex="-1" role="dialog" aria-labelledby="addNewAppModal" aria-hidden="true" ng-controller="TableWithDynamicRowsCtrl"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header clearfix "> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i> </button> <h4 class="pb-5"><span class="semi-bold">New</span> Contact</h4> </div> <div class="modal-body"> <p class="small-text">Create a new contact using this form, make sure you fill all the fields in.</p> <form role="form" > <div class="row"> <div class="col-sm-12"> <div pg-form-group class="form-group form-group-default"> <label>Name</label> <input id="appName" type="text" class="form-control" ng-model="name" required> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <div pg-form-group class="form-group form-group-default" > <label>Company</label> <input id="appCompany" type="text" class="form-control" ng-model="company" required> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <div pg-form-group class="form-group form-group-default"> <label>Address</label> <input id="appAddress" type="text" class="form-control" ng-model="address" required> </div> </div> </div> <div class="row"> <div class="col-sm-6"> <div pg-form-group class="form-group form-group-default"> <label>City</label> <input id="appCity" type="text" class="form-control" ng-model="city" required> </div> </div> <div class="col-sm-3"> <div pg-form-group class="form-group form-group-default"> <label>State</label> <input id="appState" type="text" class="form-control" ng-model="state" required> </div> </div> <div class="col-sm-3"> <div pg-form-group class="form-group form-group-default" ng-model="zip"> <label>ZIP</label> <input id="appZip" type="text" class="form-control" required> </div> </div> </div> <div class="row"> <div class="col-sm-6"> <div pg-form-group class="form-group form-group-default" ng-model="phone"> <label>Phone</label> <input id="appPhone" type="text" class="form-control" > </div> </div> <div class="col-sm-6"> <div pg-form-group class="form-group form-group-default" ng-model="email"> <label>Email</label> <input id="appEmail" type="text" class="form-control" > </div> </div> </div> <div class="row"> <div class="col-sm-12"> <div pg-form-group class="form-group form-group-default" ng-model="notes"> <label>Description</label> <input id="appNotes" type="text" required/> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <div pg-form-group class="form-group form-group-default" ng-model="status"> <label>Status</label> <input id="appStatus" type="text" class="form-control" required> </div> </div> </div> </form> </div> <div class="modal-footer"> <button id="add-app" type="button" class="btn btn-primary btn-cons" ng-click="addContact()">Add</button> <button type="button" class="btn btn-cons" data-dismiss="modal" aria-hidden="true">Close</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- END MODAL STICK UP --> <script> $(document).ready(function() { $("#appPhone").mask("(999) 999-9999"); }); </script> <script type="text/javascript"> function ran_col() { //function name var color = '#'; // hexadecimal starting symbol var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here color += letters[Math.floor(Math.random() * letters.length)]; document.getElementById('avatar').style.background = color; // Setting the random color on your div element. } </script> 

Answer 1

You must define column property of your datatable when initializing it and inclue all the column your passing to you table in the column property.

So in your case it would be employee details:

table.DataTable({
        'paging': false,
        'ordering': false,
        "columns": [
            { "data": "company" },
            { "data": "address" },
            { "data": "email" },
            { "data": "phone" },
            { "data": "notes" },
            { "data": "status" },
        ],
        data: dataset})

So make sure all the column names correspond to your employee object.

Finally, when initializing the datatabale set data to an empty array. Like in the case above i assign it dataset (empty array). Otherwise datatable will fail to initialize.

Answer 2

Its not working because of your controller declaration.

Remove ng-controller="TableWithDynamicRowsCtrl" from <div class="panel panel-transparent"... and <div class="modal fade stick-up" ... and add it to body like <body ng-controller="TableWithDynamicRowsCtrl">

Or you can change $scope to $rootScope . Like change $scope.employees = [...] to $rootScope.employees = [...] and $scope.employees.push(...) to $rootScope.employees.push(...)