Javascript jQuery数据表不工作_Javascript_Jquery_Angularjs_Datatables

Javascript jQuery数据表不工作

javascript jquery angularjs datatables

Javascript jQuery数据表不工作,javascript,jquery,angularjs,datatables,Javascript,Jquery,Angularjs,Datatables,我使用Angularjs作为前端，SpringMVC作为我的应用程序的后台。我使用数据表来显示记录。我面临的问题是数据表有时有效，有时无效在执行编辑、删除或任何动态操作后，datatable会丢失其形状，如分页、过滤和搜索。即使有数据，但它显示没有记录，但仍然显示没有分页的记录我在脚本中尝试了draw（）和reload方法，但似乎没有任何效果。在html页面中，我加载css和js文件的顺序如下 <html lang="en" data-ng-app="adminApp">

我使用Angularjs作为前端，SpringMVC作为我的应用程序的后台。我使用数据表来显示记录。我面临的问题是数据表有时有效，有时无效

在执行编辑、删除或任何动态操作后，datatable会丢失其形状，如分页、过滤和搜索。即使有数据，但它显示没有记录，但仍然显示没有分页的记录

我在脚本中尝试了

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>

下面是我如何使用ng repeat在表中显示数据

    <div class="TableBox">
    <table id="example" class="display responsive nowrap" 
    cellspacing="0" width="100%" >
    <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>

这是我的更新方法

    $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);
        }
    });
    }
    }

脚本中是否缺少某些内容，或者是否需要添加一些内容？

我为您提供了.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>

以下是jQuery数据表的3个主要片段。也，在上一段代码中，我创建了DT API提供的特殊方法。

我更新了我的问题。如果可能的话，你能建议我进行同样的编辑吗？我添加了标记，在其中我使用ng repeat循环我从Backended获得的响应记录。我还添加了Controller.js函数。你在调用方法吗在更改某些字段后，将使用最新数据重新初始化datatable？因此，基本上，您必须再次调用ng init方法以用新数据重新填充datatable。我不是在调用方法。我只是像上面提到的那样放置脚本。我需要在哪里调用init方法？因为在对任何字段进行更新后，我将在AngularController.js中调用getAllStudents（）方法。一旦更新，它将显示新更新的字段。但是分页和过滤属性消失。我在更新学生详细信息的问题中也添加了更新方法。

$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();
    });
  });
};

<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>

$('#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'
  }]
});