Datatablesテーブルヘッダースパンをクリックしたときの列の並べ替えを有効/無効にします

ジョンキー

関連する質問に関するいくつかの提案に続いて、デフォルトの列並べ替えイベントのバインドを解除して再度バインドすることができました。

しかし、1つ以上の非表示の列がある場合、奇妙な並べ替え動作で終了しました。

望ましい行動:

Databales列のTH内にスパンがあり、リモートURLでブートストラップモーダルを開く必要があります。しかし、デフォルトの並べ替えイベントがトリガーされたくないので、これを配置したスパンのonClick:$('th').off('click.DT');次に、モーダルを起動し、問題なくリッスンしている注文をバインドするこのハンドラーがあります: `

$('body').on('click', '[data-toggle="modal"]', function(){
        $($(this).data("target")+' .modal-body').load($(this).data("remote"));
            table.columns().every( function (i) {               
             if(table.columns().visible()[i]){
                table.order.listener( $('#Testata th:eq('+i+')'), i);
             }
            });
    });`

この問題は、非表示の列がある場合に発生します。つまり、非表示の列が1つある場合: `

'columnDefs': [          
            {
                "targets": [0],
                "visible": false
            }]`

順序リスナーはすべての列で機能しますが、並べ替えが間違っています。複数の非表示の列があります。つまり、 `

'columnDefs': [          
            {
                "targets": [0],
                "visible": false
            },
            {
                "targets": [3],
                "visible": false
            }
        ]`

順序リスナーはすべての列で機能するわけではなく、並べ替えが間違っています。

ここでシナリオをシミュレートするためのフィドルは、最初の列の(i)スパンをクリックしてください。

どうもありがとう。

lofihelsinki

表示されている列のみをカウントする別の実行番号を割り当てる必要があります。

$('body').on('click', '[data-toggle="modal"]', function(){
    $($(this).data("target")+' .modal-body').load($(this).data("remote"));
    var elIdx = 0;
    table.columns(':visible').every( function (i) {
        table.order.listener( $('#Testata th:eq('+elIdx+')'), i);
        elIdx++;
    });
});

jsFiddle

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

JQueryテーブルの並べ替えの問題-列をスキップすると、最初のマウスクリックが無効になります

分類Dev

特定のボタンがクリックされたときにデータテーブルの並べ替えを無効にする方法

分類Dev

DataTables-データを並べ替えるテーブルヘッダーのテキストのみをクリックします

分類Dev

asp.net ボタンをクリックしたらデータグリッドの並べ替えアクションを無効にできますか?

分類Dev

jQueryを使用してHTMLテーブルのすべてのチェックボックスを切り替え(有効化/無効化)します

分類Dev

数値と文字列値を持つ列のテーブルヘッダーをクリックしてReactテーブルを並べ替える

分類Dev

PyQt5:QHeaderViewのヘッダーをクリックしたときにQTableViewを並べ替える方法は?

分類Dev

ヘッダーをクリックしてテーブルの列を昇順または降順で並べ替える方法

分類Dev

ブートストラップテーブルの非表示列の並べ替えを無効にする

分類Dev

ユーザーが列をクリックしたときにテーブルを並べ替える

分類Dev

テーブルソーターの列の並べ替えが、テーブルヘッダーのチェックオールチェックボックスを上書きしています

分類Dev

列タイトルのクリックで並べ替えを無効にし、jQueryデータテーブルの矢印のクリックを許可するにはどうすればよいですか?

分類Dev

($(#addData).is(: "visible"))の場合、テーブルの列の並べ替えを無効にします

分類Dev

テーブルの列のチェックボックスを有効または無効にする方法

分類Dev

ヘッダーをクリックしたときの特別な並べ替え ListView

分類Dev

C#DataGridView列ヘッダーの並べ替えアイコンを無効にする

分類Dev

Vaadinグリッドテーブル:並べ替え機能を無効にして1つの列の色を設定する方法

分類Dev

AutoGenerated列とIEnumerableItemsSourceを含む列ヘッダーDataGridをクリックして行を並べ替えます

分類Dev

ヘッダークリックでテーブル列を並べ替えますか?

分類Dev

Eclipse / TestNGでアノテーションヘルパーリンクをどのように切り替え/無効にしますか?

分類Dev

インタラクティブグリッドレポートのハイパーリンクケース条件を使用した列の並べ替え

分類Dev

ユーザーが特定のポイントを超えてスクロールしたときに「クリック」機能を無効にする

分類Dev

チェックボックスのクリックでテキストフィールドを有効/無効にしようとしています

分類Dev

列の値のJqueryDatatableチェックボックスベースを有効または無効にします

分類Dev

複数のデスクトップの並べ替え機能を無効にしますか?

分類Dev

Pythonを使用して、インデックス付き列とインデックスなし列に基づいてテーブル値を並べ替える

分類Dev

グリッドビューの列に基づいて並べ替えを実行したいのですが、HeaderTempleteのヘッダーをクリックしてもイベントが発生しません

分類Dev

3つのテーブルを結合し、パンダの列を具体的に並べ替えます

分類Dev

無効な要素の状態:要素をクリックしてドロップダウンに日付を挿入しようとしたときにエラーをクリアするには、要素をユーザーが編集可能にする必要があります-Seleniumを使用して切り替えます

Related 関連記事

  1. 1

    JQueryテーブルの並べ替えの問題-列をスキップすると、最初のマウスクリックが無効になります

  2. 2

    特定のボタンがクリックされたときにデータテーブルの並べ替えを無効にする方法

  3. 3

    DataTables-データを並べ替えるテーブルヘッダーのテキストのみをクリックします

  4. 4

    asp.net ボタンをクリックしたらデータグリッドの並べ替えアクションを無効にできますか?

  5. 5

    jQueryを使用してHTMLテーブルのすべてのチェックボックスを切り替え(有効化/無効化)します

  6. 6

    数値と文字列値を持つ列のテーブルヘッダーをクリックしてReactテーブルを並べ替える

  7. 7

    PyQt5:QHeaderViewのヘッダーをクリックしたときにQTableViewを並べ替える方法は?

  8. 8

    ヘッダーをクリックしてテーブルの列を昇順または降順で並べ替える方法

  9. 9

    ブートストラップテーブルの非表示列の並べ替えを無効にする

  10. 10

    ユーザーが列をクリックしたときにテーブルを並べ替える

  11. 11

    テーブルソーターの列の並べ替えが、テーブルヘッダーのチェックオールチェックボックスを上書きしています

  12. 12

    列タイトルのクリックで並べ替えを無効にし、jQueryデータテーブルの矢印のクリックを許可するにはどうすればよいですか?

  13. 13

    ($(#addData).is(: "visible"))の場合、テーブルの列の並べ替えを無効にします

  14. 14

    テーブルの列のチェックボックスを有効または無効にする方法

  15. 15

    ヘッダーをクリックしたときの特別な並べ替え ListView

  16. 16

    C#DataGridView列ヘッダーの並べ替えアイコンを無効にする

  17. 17

    Vaadinグリッドテーブル:並べ替え機能を無効にして1つの列の色を設定する方法

  18. 18

    AutoGenerated列とIEnumerableItemsSourceを含む列ヘッダーDataGridをクリックして行を並べ替えます

  19. 19

    ヘッダークリックでテーブル列を並べ替えますか?

  20. 20

    Eclipse / TestNGでアノテーションヘルパーリンクをどのように切り替え/無効にしますか?

  21. 21

    インタラクティブグリッドレポートのハイパーリンクケース条件を使用した列の並べ替え

  22. 22

    ユーザーが特定のポイントを超えてスクロールしたときに「クリック」機能を無効にする

  23. 23

    チェックボックスのクリックでテキストフィールドを有効/無効にしようとしています

  24. 24

    列の値のJqueryDatatableチェックボックスベースを有効または無効にします

  25. 25

    複数のデスクトップの並べ替え機能を無効にしますか?

  26. 26

    Pythonを使用して、インデックス付き列とインデックスなし列に基づいてテーブル値を並べ替える

  27. 27

    グリッドビューの列に基づいて並べ替えを実行したいのですが、HeaderTempleteのヘッダーをクリックしてもイベントが発生しません

  28. 28

    3つのテーブルを結合し、パンダの列を具体的に並べ替えます

  29. 29

    無効な要素の状態:要素をクリックしてドロップダウンに日付を挿入しようとしたときにエラーをクリアするには、要素をユーザーが編集可能にする必要があります-Seleniumを使用して切り替えます

ホットタグ

アーカイブ