jQuery 数据表不工作
Posted
技术标签:
【中文标题】jQuery 数据表不工作【英文标题】：jQuery Datatables Not Working 【发布时间】：2018-02-14 23:02:00 【问题描述】：我使用 Angularjs 作为前端，使用 spring mvc 作为我的应用程序的后端。我正在使用数据表来显示记录。我面临的问题是数据表有时有效，有时无效。
在执行编辑或删除或任何动态操作后，数据表会失去其形状，如分页、过滤、搜索。即使会有数据但显示没有记录但仍然显示没有分页的记录。
我在脚本中尝试了draw() 和reload 方法，但似乎没有任何效果。
在 html 页面中，我加载 css 和 js 文件的顺序是这样的
<html lang="en" data-ng-app="adminApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/css/bootstrap.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/css/Custom-Style.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/font-awesome-4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/font-awesome-4.0.3/css/font-awesome.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/front/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" media="screen" ref="resources/front/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="resources/angular/angulars-datetime-picker.css" />
<link rel="stylesheet" href="resources/front/css/spinner.css">
<script src="resources/front/js/jquery-1.12.4.js" type="text/javascript"></script>
<script src="resources/front/js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" src="resources/front/js/Custom-js.js"></script>
<script src="resources/front/js/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript" src="resources/front/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="resources/front/js/dataTables.responsive.min.js"></script>
</head>
</html>
这是我尝试一切的脚本。我把它放在了head 标签内。我已将上述所有代码放在每个 html 文件中。
<script>
$(document).ready(function()
$('#example').DataTable();
);
</script>
这是我如何使用 ng-repeat 在表格中显示数据
<div class="TableBox">
<table id="example" class="display responsive nowrap"
cellspacing="0" >
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="example"
rowspan="1" colspan="1" aria-sort="ascending" aria-label="" >
SlNo
</th>
<th class="sorting_asc" tabindex="0" aria-controls="example"
rowspan="1" colspan="1" aria-sort="ascending"
aria-label="">Name</th>
</tr>
</thead>
<tbody>
<tr role="row" class="even" data-ng-repeat="student in students">
<td>$index + 1</td>
<td>student.studentName
</td>
</tr>
</tbody>
</table>
</div>
这是我的 AngularController.js
$scope.getAllStudents = function()
AdminStudentService.getAllStudents().then(function(response)
$scope.students=response.data;
);
这是我的更新方法
$scope.updateStudent = function(student)
$scope.editstudentForm.$submitted= true;
if($scope.editstudentForm.$valid)
AdminStudentService.updateStudent(student).then(function(response)
if(response.data=="success")
$scope.editstudentForm.$submitted= false;
$window.scrollTo(0,0);
$scope.student = ;
$scope.getAllStudents();
$scope.successmessage1="Student Details Updated!;
$timeout(function()
$scope.closeeditStudent();
$scope.successmessage1="";
, 1500);
);
我是在脚本中遗漏了什么还是需要添加什么？
【问题讨论】：
【参考方案1】：我正在为您提供 .js 函数，这将帮助您理解数据表。
$scope.getAllReports = function()
$http(
method : 'GET',
url : '/getReport'
).success(function(data, status, headers, config)
$scope.test = data;
$('#stack').DataTable().clear().draw();
angular.forEach($scope.test, function(test)
$('#mantisi').DataTable().row.add([
test.t0,
test.t1,
test.t2,
test.t3,
test.t4,
test.t5
]).draw();
);
);
;
这里还有来自 .html 的代码：
<table id="stack" class="table table-bordered table-striped" ng-init="getAllReports()">
<thead>
<tr>
<th>t0</th>
<th>t1</th>
<th>t2</th>
<th>t3</th>
<th>t4</th>
<th>t5</th>
</tr>
</thead>
<tbody></tbody>
</table>
还有一个 .js 用于 DT：
$('#stack').DataTable(
"order": [[ 0, "asc" ]],
"language":
url: '/datatables/datatables.hr.json'
,
"drawCallback": function( settings )
$(".btn-excel-custom").removeClass("dt-button buttons-excel buttons-html5");
$(".btn-default-custom").removeClass("dt-button").addClass("btn btn-default");
,
"bPaginate": false,
dom: 'Bfrt',
buttons: [
text:"Export to Excel",
extend: 'excel',
className: 'btn btn-excel-custom'
]
);
这些是 3 个主要的 sn-ps，可以很好地显示 jQuery 数据表。另外，我在上次 sn-p 中创建了 DT API 提供的特殊方法。
【讨论】：
我已经更新了我的问题。如果有可能，你能建议我进行相同的编辑吗？我已经添加了以上是关于jQuery 数据表不工作的主要内容，如果未能解决你的问题，请参考以下文章
为啥这个 dataTables jQuery 插件 (TableTools) 不工作？
带有从 Rails 生成的 JSON 数据源的 jQuery UI 自动完成 - 不工作
jQuery AJAX GET html 数据 IE8 不工作
jQuery Mobile Popup 和 ListView，以及 Popup div 内的 Knockout.js 数据绑定 - 不工作