Javascript Element.DataTable不是函数吗？_Javascript_Jquery_Angular

Javascript Element.DataTable不是函数吗？

javascript jquery angular

Javascript Element.DataTable不是函数吗？,javascript,jquery,angular,Javascript,Jquery,Angular,我使用智能管理主题。我试图实现数据表，但它显示了错误 Element.DataTable不起作用我的控制台显示以下错误错误类型错误：element.DataTable不是函数 table.ts文件代码如下所示 ngOnInit() { setTimeout(()=>{this.render()},500); } render() { let element = $(this.el.nativeElement.children[0]); let opt

我使用智能管理主题。我试图实现数据表，但它显示了错误 Element.DataTable不起作用

我的控制台显示以下错误错误类型错误：element.DataTable不是函数

table.ts文件代码如下所示

  ngOnInit() {
  setTimeout(()=>{this.render()},500);
  }

  render() {
    let element = $(this.el.nativeElement.children[0]);
    let options = this.options || {};

    let toolbar = "";
    if (options.buttons) toolbar += "B";
    if (this.paginationLength) toolbar += "l";
    if (this.columnsHide) toolbar += "C";

    if (typeof options.ajax === "string") {
      let url = options.ajax;
      options.ajax = {
        url: "./../../assets/datatables.standard.json"
        // complete: function (xhr) {
        //
        // }
      };
    }

    options = $.extend(options, {
      dom:
      "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" +
      toolbar +
      ">r>" +
      "t" +
      "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
      oLanguage: {
        sSearch:
        "<span class='input-group-addon'><i class='glyphicon glyphicon-search'></i></span> ",
        sLengthMenu: "_MENU_"
      },
      autoWidth: false,
      retrieve: true,
      responsive: true,
      initComplete: (settings, json) => {
        element
        .parent()
        .find(".input-sm")
        .removeClass("input-sm")
        .addClass("input-md");
      }
    });
    console.log("_dataTable");
    console.log(element);
    const _dataTable = element.DataTable(options);

    if (this.filter) {
      // Apply the filter
      element.on("keyup change", "thead th input[type=text]", function() {
        _dataTable
        .column(
          $(this)
          .parent()
          .index() + ":visible"
        )
        .search(this.value)
        .draw();
      });
    }

    if (!toolbar) {
      element
      .parent()
      .find(".dt-toolbar")
      .append(
        '<div class="text-right"><img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>'
      );
    }

    if (this.detailsFormat) {
      let format = this.detailsFormat;
      element.on("click", "td.details-control", function() {
        var tr = $(this).closest("tr");
        var row = _dataTable.row(tr);
        if (row.child.isShown()) {
          row.child.hide();
          tr.removeClass("shown");
        } else {
          row.child(format(row.data())).show();
          tr.addClass("shown");
        }
      });
    }
  }

 <table class="dataTable responsive {{tableClass}}" width="{{width}}">
        <ng-content></ng-content>
</table>

public REST_ROOT = 'https://jsonplaceholder.typicode.com';

  options = {
    dom: "Bfrtip",
    ajax: (data, callback, settings) => {
      this.http.get(this.REST_ROOT + '/posts')
      .pipe(
        map((data: any)=>(data.data || data)),
        catchError(this.handleError),
      )
      .subscribe((data) => {
        console.log('data from rest endpoint', data);
        callback({
          aaData: data.slice(0, 100)
        })
      })
    },
    columns: [
      { data: "userId" },
      { data: "id" },
      { data: "title" },
      { data: "body" },
    ]
  };

  constructor(private http: HttpClient) { }

  ngOnInit() {}


  private handleError(error: any) {
    // In a real world app, we might use a remote logging infrastructure
    // We'd also dig deeper into the error to get a better message
    let errMsg = (error.message) ? error.message :
    error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }

<div color="blueDark">
    <header>
        <span class="widget-icon"> <i class="fa fa-table"></i> </span>
        <h2>Datatables Rest Demo</h2>
    </header>
    <div>
        <div class="widget-body no-padding">
            <app-table [options]="options" tableClass="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th [style.width]="'8%'" data-hide="mobile-p">User ID</th>
                        <th [style.width]="'8%'" data-hide="mobile-p">Post ID</th>
                        <th>Title</th>
                        <th data-class="expand">Body</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>User ID</th>
                        <th>Post ID</th>
                        <th>Title</th>
                        <th>Body</th>
                    </tr>
                </tfoot>
            </app-table>
        </div>
    </div>
</div>

下面给出了app.component.html代码

  ngOnInit() {
  setTimeout(()=>{this.render()},500);
  }

  render() {
    let element = $(this.el.nativeElement.children[0]);
    let options = this.options || {};

    let toolbar = "";
    if (options.buttons) toolbar += "B";
    if (this.paginationLength) toolbar += "l";
    if (this.columnsHide) toolbar += "C";

    if (typeof options.ajax === "string") {
      let url = options.ajax;
      options.ajax = {
        url: "./../../assets/datatables.standard.json"
        // complete: function (xhr) {
        //
        // }
      };
    }

    options = $.extend(options, {
      dom:
      "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" +
      toolbar +
      ">r>" +
      "t" +
      "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
      oLanguage: {
        sSearch:
        "<span class='input-group-addon'><i class='glyphicon glyphicon-search'></i></span> ",
        sLengthMenu: "_MENU_"
      },
      autoWidth: false,
      retrieve: true,
      responsive: true,
      initComplete: (settings, json) => {
        element
        .parent()
        .find(".input-sm")
        .removeClass("input-sm")
        .addClass("input-md");
      }
    });
    console.log("_dataTable");
    console.log(element);
    const _dataTable = element.DataTable(options);

    if (this.filter) {
      // Apply the filter
      element.on("keyup change", "thead th input[type=text]", function() {
        _dataTable
        .column(
          $(this)
          .parent()
          .index() + ":visible"
        )
        .search(this.value)
        .draw();
      });
    }

    if (!toolbar) {
      element
      .parent()
      .find(".dt-toolbar")
      .append(
        '<div class="text-right"><img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>'
      );
    }

    if (this.detailsFormat) {
      let format = this.detailsFormat;
      element.on("click", "td.details-control", function() {
        var tr = $(this).closest("tr");
        var row = _dataTable.row(tr);
        if (row.child.isShown()) {
          row.child.hide();
          tr.removeClass("shown");
        } else {
          row.child(format(row.data())).show();
          tr.addClass("shown");
        }
      });
    }
  }

 <table class="dataTable responsive {{tableClass}}" width="{{width}}">
        <ng-content></ng-content>
</table>

public REST_ROOT = 'https://jsonplaceholder.typicode.com';

  options = {
    dom: "Bfrtip",
    ajax: (data, callback, settings) => {
      this.http.get(this.REST_ROOT + '/posts')
      .pipe(
        map((data: any)=>(data.data || data)),
        catchError(this.handleError),
      )
      .subscribe((data) => {
        console.log('data from rest endpoint', data);
        callback({
          aaData: data.slice(0, 100)
        })
      })
    },
    columns: [
      { data: "userId" },
      { data: "id" },
      { data: "title" },
      { data: "body" },
    ]
  };

  constructor(private http: HttpClient) { }

  ngOnInit() {}


  private handleError(error: any) {
    // In a real world app, we might use a remote logging infrastructure
    // We'd also dig deeper into the error to get a better message
    let errMsg = (error.message) ? error.message :
    error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }

<div color="blueDark">
    <header>
        <span class="widget-icon"> <i class="fa fa-table"></i> </span>
        <h2>Datatables Rest Demo</h2>
    </header>
    <div>
        <div class="widget-body no-padding">
            <app-table [options]="options" tableClass="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th [style.width]="'8%'" data-hide="mobile-p">User ID</th>
                        <th [style.width]="'8%'" data-hide="mobile-p">Post ID</th>
                        <th>Title</th>
                        <th data-class="expand">Body</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>User ID</th>
                        <th>Post ID</th>
                        <th>Title</th>
                        <th>Body</th>
                    </tr>
                </tfoot>
            </app-table>
        </div>
    </div>
</div>


Datatables Rest演示
用户ID
邮政ID
标题
身体
用户ID
邮政ID
标题
身体

您似乎没有将Datatable库包含在page@RoryMcCrossan我们将其包含在index.html中，该URL正确吗？您是否正在加载第二个版本的jQuery？@Rorymcrossan让我检查您是否有其他url，然后请尽快提供给我