jQuery(...).DataTable is not a function

Question

I am trying use jQuery DataTable with Angular JS in ServiceNow application and it throws following error jQuery(...).DataTable is not a function. Created variable 'j' to avoid conflict between jQuery and AngularJS.

function($scope, $http)
{
  var c=this;
    var jsonData;

    c.getData = function() 
    {

        c.server.get().then(
            function(response)
            {  
                c.data.tableData= angular.fromJson(response.data.tableData);
                jsonData=c.data.tableData;
                var j = jQuery.noConflict();
          j('#open_incidents').DataTable(
                {
                    data:jsonData
                });
            })
    };
    c.getData();



}



<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>


<div  class="container-fluid">
  <div id="h2_title">
      Welcome to the Automated Incident Triage System 
    </div> <br/>
  <div class="panel panel-info">
    <div class="panel-heading"> Open Incidents</div>
    <div class="panel-body">

    <div class="col-md-12" ng-controller="demoController as demo">
      <table  ng-table="demo.tableParams" class="table display" id="open_incidents">
        <tr class="row header blue">
          <th>#</th>
          <th>Incident Id</th>
          <th>Incident Type</th>
          <th>Status</th>
          <th>Indicator Count</th>
          <th>Created Date</th>
          <th>Last Updated</th>
        </tr>

        <tr ng-repeat="row in c.data.tableData track by $index" class="row">
          <td data-title="'incidentId'" class="cell">{{$index}}</td>
          <td data-title="'incidentId'" sortable="'incidentId'" class="cell">{{row.incidentId}}</td>
          <td data-title="'incidentType'" sortable="'incidentType'" class="cell">{{row.incidentType}}</td>
          <td data-title="'incidentStatus'" sortable="'incidentStatus'" class="cell">{{row.incidentStatus}}</td>
          <td data-title="'indicatorCount'" sortable="'indicatorCount'" class="cell">{{row.indicatorCount}}</td>
          <td data-title="'createdDate'" sortable="'createdDate'" class="cell">{{row.createdDate}}</td>
          <td data-title="'lastUpdated'" sortable="'lastUpdated'" class="cell">{{row.lastUpdated}}</td>

        </tr> 


      </table>
        </div>

    </div>
  </div>
</div>

<script>

</script>

Answer 1

I mixed up Angular JS and jQuery. I was able resolve this by modifying table structure.

<div  class="container-fluid">
  <div id="h2_title">
      Welcome to the Automated Incident Triage System 
    </div> <br/>
  <div class="panel panel-info">
    <div class="panel-heading"> Open Incidents</div>
    <div class="panel-body">

    <div class="col-md-12">

   <!--   
      <table  ng-table="demo.tableParams" class="table display" id="open_incidents">
        <tr class="row header blue">
          <th>#</th>
          <th>Incident Id</th>
          <th>Incident Type</th>
          <th>Status</th>
          <th>Indicator Count</th>
          <th>Created Date</th>
          <th>Last Updated</th>
        </tr>

        <tr ng-repeat="row in c.data.tableData track by $index" class="row">
          <td data-title="'incidentId'" class="cell">{{$index}}</td>
          <td data-title="'incidentId'" sortable="'incidentId'" class="cell"><a href="/haloportal/?id=incident_summary&sys_id={{row.sysId}}" style="color:#0c4a6f">{{row.incidentId}}</a></td>
          <td data-title="'incidentType'" sortable="'incidentType'" class="cell">{{row.incidentType}}</td>
          <td data-title="'incidentStatus'" sortable="'incidentStatus'" class="cell">{{row.incidentStatus}}</td>
          <td data-title="'indicatorCount'" sortable="'indicatorCount'" class="cell">{{row.indicatorCount}}</td>
          <td data-title="'createdDate'" sortable="'createdDate'" class="cell">{{row.createdDate}}</td>
          <td data-title="'lastUpdated'" sortable="'lastUpdated'" class="cell">{{row.lastUpdated}}</td>

        </tr> 

      </table>  -->

       <table   class="display" id="open_incidents">
        <thead>
          <tr class="row header blue">
            <th>#</th>
            <th>Incident Id</th>
            <th>Incident Type</th>
            <th>Status</th>
            <th>Indicator Count</th>
            <th>Created Date</th>
            <th>Last Updated</th>
        </tr>
       </thead>
         <tbody>

         </tbody>

      </table>  
        </div>

    </div>
  </div>
</div>

And JS code:

function()
{
  var c=this;
    var jsonTable;
    c.getData = function() 
    {

        c.server.get().then(
            function(response)
            {  
                c.data.tableData=response.data.tableData;
                jsonTable=response.data.tableData;
                //c.data.tableData= angular.fromJson(response.data.tableData);
            })
    };
    c.getData();
    jsonTable=JSON.parse(c.data.tableData);
    $("#open_incidents").dataTable({ data: jsonTable,
        columns: [
        { data: "incidentIndex" },
        { data: "incidentId" },
        { data: "incidentType" },
        { data: "incidentStatus"},
        { data: "indicatorCount"},
        { data: "createdDate"},
        { data: "lastUpdated"}
    ]
    });

}