jQuery数据表不起作用

Question

我正在使用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);
        }
    });
    }
    }

我在脚本中丢失了某些内容还是需要添加某些内容？

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

还有DT的.js：

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

这些是jQuery数据表的正确显示的3个主要片段。 此外，我在上一片段中创建了DT API提供的特殊方法。

jQuery数据表不起作用

问题描述

1 个解决方案

解决方案1
0 2017-09-06 14:19:22

jQuery数据表不起作用

问题描述

1 个解决方案

解决方案1 0 2017-09-06 14:19:22

解决方案1
0 2017-09-06 14:19:22