jQueryのデータ型が動作しない

私は、フロントエンドにAngularjsを、私のアプリケーションのバックエンドとしてspring mvcを使用しています。私はレコードを表示するためにデータテーブルを使用しています。私が直面している問題は、時々作業するデータテーブルであり、時にはそうではありません。jQueryのデータ型が動作しない

編集、削除、または動的操作を実行した後、データテーブルのページング、フィルタリング、検索などの形状が失われます。データはありますが、レコードは存在しませんが、ページネーションのないレコードも表示されます。

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

私はここの表に

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

データを表示するためのNGリピートを使用していますがここでは私の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); 
     } 
    }); 
    } 
    }

です

私はsomを見逃していますか？スクリプトの中に何かか、何かを追加する必要がありますか？

出典

2017-09-06 Sachin HR

私はデータセットを理解するのに役立つ.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のDataTableののまともなショーアップのための3つの主なスニペットです。また、最後のスニペットでDT APIによって提供される特別なメソッドを作成しました。

出典

2017-09-06 14:19:22

私は質問が更新されました。もし何かが可能であれば、私は同じ編集を提案することができます。

タグを追加しました。バックグラウンドから応答として返ってくるレコードをループするのにng-repeatを使用しています。また、Controller.js関数も追加しました。 –

いくつかのフィールドを変更した後、最新のデータでデータテーブルを再初期化するメソッドを呼び出していますか？基本的に、新しいデータでデータテーブルを再生成するには、ng-initメソッドを再度呼び出さなければなりません。 –

私はメソッドを呼び出していません。私は上記のようにスクリプトを配置しています。私はinitメソッドを呼び出す必要がありますか？任意のフィールドの更新を行った後、更新されるとすぐにAngularController.js.AsのgetAllStudents（）メソッドを呼び出していますので、新たに更新されたフィールドが表示されます。ページネーションとフィルタリングのプロパティは消えます –

jQueryのデータ型が動作しない

答えて

関連する問題