javascript - 数据未添加到 Jquery DataTables 中？

Question

所以我尝试使用 AngularJS 构建一个应用程序。我正在尝试创建一个表来显示联系信息，并将信息填充在不同的行中。我还希望能够向该表添加新联系人。该表如下所示:image of contact table 。

这是当您按下“添加行”按钮时添加新联系人的表单:image of "add a contact" form 。

我将显示的 HTML 代码是部分模板的一部分，因此如果您尝试运行它，它将是无样式的。如果你查看 javascript 部分，灰色区域是不同的场景，我会尝试强制提供这些信息。我一整天都在努力解决这个问题，但似乎找不到解决方案。关于我的代码中可能做错的事情有什么建议吗？这是代码:

'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="p-b-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

您必须在初始化数据表时定义其列属性，并将传递给表的所有列包含在列属性中。

因此，在您的情况下，这将是员工详细信息:

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

因此请确保所有列名称都对应于您的员工对象。

最后，在初始化数据表时将data设置为空数组。就像上面的例子一样，我分配它数据集(空数组)。否则数据表将无法初始化。