jQuery 数据表不工作答案

【问题标题】：jQuery Datatables Not WorkingjQuery 数据表不工作
【发布时间】：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" 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>

这是我的 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);
        }
    });
    }
    }

我是在脚本中遗漏了什么还是需要添加什么？

【问题讨论】：

标签： javascript jquery angularjs datatables

【解决方案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 提供的特殊方法。

【讨论】：

我已经更新了我的问题。如果有可能，你能建议我进行相同的编辑吗？我已经添加了标签，我在其中使用 ng-repeat 循环遍历我的记录我得到了 backened 的响应。而且我还添加了 Controller.js 函数。

您是否正在调用一个方法，该方法将在更改某些字段后使用最新数据重新初始化数据表？所以基本上，你必须再次调用 ng-init 方法来用新数据重新填充数据表。

我没有调用方法。我只是按照上面提到的那样放置脚本。我需要在哪里调用init方法？因为在更新任何字段后，我在 AngularController.js 中调用 getAllStudents() 方法。一旦更新，它将显示新更新的字段。但分页和过滤属性消失

我在用于更新学生详细信息的问题中也添加了更新方法。