数据没有添加到Jquery DataTables？
所以我正在尝试使用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>
2 个答案:
答案 0 :(得分：0)
初始化时，您必须定义datatable的列属性，并在列属性中包含传递给您的所有列。
因此，在您的情况下，这将是员工的详细信息：
table.DataTable({
'paging': false,
'ordering': false,
"columns": [
{ "data": "company" },
{ "data": "address" },
{ "data": "email" },
{ "data": "phone" },
{ "data": "notes" },
{ "data": "status" },
],
data: dataset})
因此，请确保所有列名称都与您的员工对象相对应。
最后，在将数据集集data初始化为空数组时。与上面的情况一样，我分配它dataset（空数组）。否则数据表将无法初始化。
答案 1 :(得分：0)
由于您的控制器声明，它无法正常工作。
从ng-controller="TableWithDynamicRowsCtrl"和<div class="panel panel-transparent"...移除<div class="modal fade stick-up" ...并将其添加到正文中
<body ng-controller="TableWithDynamicRowsCtrl">
或者您可以将$scope更改为$rootScope。比如将$scope.employees = [...]更改为$rootScope.employees = [...]，将$scope.employees.push(...)更改为$rootScope.employees.push(...)
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？