jQuery(...).DataTable 不是函数

Posted 2023-05-09

【中文标题】jQuery(...).DataTable 不是函数

【英文标题】：jQuery(...).DataTable is not a function

【发布时间】：2017-09-17 10:05:49

【问题描述】：

我正在尝试在 ServiceNow 应用程序中将 jQuery DataTable 与 Angular JS 一起使用，它会引发以下错误 。创建变量“j”以避免 jQuery 和 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>

【问题讨论】：

也许您还需要在<script> 中提供jQuery？

我也试过了。我没有工作。

将代码包装在<script> 标记中？它目前看起来像是在 html 中自行浮动。可能无法修复错误，但无论哪种方式都不好。

好建议。我试过了，还是不行。

为什么会有人反对这个？这是实时问题。人怎么了？

【参考方案1】：

我混合了 Angular JS 和 jQuery。我可以通过修改表结构来解决这个问题。

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

还有JS代码：

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"
    ]
    );