Angular 4+Datablesによるカスタムヘッダーソートとデータリフレッシュ(Warning:Cannot reinitialise DataTableの解決)
Angular 4+Datablesによるカスタムヘッダーソートとデータリフレッシュ(Warning:Cannot reinitialise DataTableの解決)
引き続きディスクプロジェクトを行い、最近フロントエンドファイルとディレクトリ表示の機能を開発し、クエリーデータのリストのヘッダーソートとファイル名検索機能を追加する必要があります.
ネット上で多くの解決策を探して、最後にdatatablesプラグインを採用してヘッダーのソートの需要を解決することを決定しました.
Datatablesの概要:Datablesはjqueryテーブルプラグインです.高度に柔軟なツールであり、HTMLテーブルに高度なインタラクティブ機能を追加できます.
公式サイト:https://datatables.net/
中国語公式サイト:http://www.datatables.club/
基本情報を理解して作業を開始し、プロジェクトで使用するフロントエンドフレームワークはangular 4であり、datatablesの例を参照します(http://l-lin.github.io/angular-datatables/#/basic/angular-way)、ディスクプロジェクトのヘッダーソートを実現しました.ただし、デフォルトでは、すべてのカラムがヘッダーソートされます.
そこでdatatablesの使い方を掘り起こし続け、dtoptionsの構成でカスタムヘッダーソートを実現できることを発見しました.
以上のようにtableカスタム列のヘッダソートを実現した.
しかし、また新しい問題が発生しました.テーブルにデータを追加または削除すると、ページが間違っています.Warning:Cannot reinitialise DataTable、
公式サイトのソリューション:https://datatables.net/manual/tech-notes/3.また,ネット上でn多資料を探したが,基本的にはangularjsまたはajaxに基づくソリューションであり,angular 4に関するものはほとんどなかった.しかし、設定できる解決策があります.
destroy:trueまたはretrieve:trueはエラーの問題を解決し、次のコードがあります.
上記のコードでは、tableがデータを追加または削除した後、Cannot reinitialise DataTableがエラーを報告することはありませんが、ページがリフレッシュされず、データは元のままであり、手動reloadページが有効になる必要があります.
datatablesのリフレッシュ機能を探してみましたが、結果は出ませんでした.結果は自分が馬鹿であることを発見して、直接
いいんじゃない?createとdeleteフロントエンドページメソッドの後にreloadを追加します.問題が解決する.
同じangular 4+datatablesを使用している友人にいくつかの助けと啓発を望んでいます.
ありがとう
引き続きディスクプロジェクトを行い、最近フロントエンドファイルとディレクトリ表示の機能を開発し、クエリーデータのリストのヘッダーソートとファイル名検索機能を追加する必要があります.
ネット上で多くの解決策を探して、最後にdatatablesプラグインを採用してヘッダーのソートの需要を解決することを決定しました.
Datatablesの概要:Datablesはjqueryテーブルプラグインです.高度に柔軟なツールであり、HTMLテーブルに高度なインタラクティブ機能を追加できます.
公式サイト:https://datatables.net/
中国語公式サイト:http://www.datatables.club/
基本情報を理解して作業を開始し、プロジェクトで使用するフロントエンドフレームワークはangular 4であり、datatablesの例を参照します(http://l-lin.github.io/angular-datatables/#/basic/angular-way)、ディスクプロジェクトのヘッダーソートを実現しました.ただし、デフォルトでは、すべてのカラムがヘッダーソートされます.
そこでdatatablesの使い方を掘り起こし続け、dtoptionsの構成でカスタムヘッダーソートを実現できることを発見しました.
this.dtOptions = {
pagingType: 'full_numbers',
order: [[2, 'desc']], // 1
lengthChange: false,
info: false,
language: { //
'paginate': {
'first': ' ',
'last': ' ',
'next': ' ',
'previous': ' '
},
'zeroRecords': ' ',
'search': ' ',
'emptyTable': ' ',
},
columns: [ // 2,
{ orderable: false },
{ orderable: false },
null,
{ orderable: false },
{ orderable: false },
]
};
以上のようにtableカスタム列のヘッダソートを実現した.
しかし、また新しい問題が発生しました.テーブルにデータを追加または削除すると、ページが間違っています.Warning:Cannot reinitialise DataTable、
公式サイトのソリューション:https://datatables.net/manual/tech-notes/3.また,ネット上でn多資料を探したが,基本的にはangularjsまたはajaxに基づくソリューションであり,angular 4に関するものはほとんどなかった.しかし、設定できる解決策があります.
destroy:trueまたはretrieve:trueはエラーの問題を解決し、次のコードがあります.
this.dtOptions = {
pagingType: 'full_numbers',
order: [[2, 'desc']],
destroy: true, // Cannot reinitialise DataTable
lengthChange: false,
info: false,
language: {
'paginate': {
'first': ' ',
'last': ' ',
'next': ' ',
'previous': ' '
},
'zeroRecords': ' ',
'search': ' ',
'emptyTable': ' ',
// 'info': ' _TOTAL_ ',
},
columns: [
{ orderable: false },
{ orderable: false },
null,
{ orderable: false },
{ orderable: false },
]
};
上記のコードでは、tableがデータを追加または削除した後、Cannot reinitialise DataTableがエラーを報告することはありませんが、ページがリフレッシュされず、データは元のままであり、手動reloadページが有効になる必要があります.
datatablesのリフレッシュ機能を探してみましたが、結果は出ませんでした.結果は自分が馬鹿であることを発見して、直接
window.location.reload();
いいんじゃない?createとdeleteフロントエンドページメソッドの後にreloadを追加します.問題が解決する.
同じangular 4+datatablesを使用している友人にいくつかの助けと啓発を望んでいます.
ありがとう