1

DataTable があり、列の 1 つで Tokenfield オートコンプリート ライブラリを使用したいと考えています。私の問題は、ページネーションのために DataTable が再描画されると、Tokenfield が機能しないことです。

DataTable の初期化 / Tokenfield の初期化

App.datatables();

        /* Initialize Datatables */
        $('#memberTable').dataTable({
            columnDefs: [{ searchable: false, targets: 3 }],
            processing: true,
            pageLength: 20,
            lengthMenu: [[10, 20, 50, -1], [10, 20, 50, 'All']]
        });

        /* Add placeholder attribute to the search input */
        $('.dataTables_filter input').attr('placeholder', 'Search');


/* create tokenfield */
$('.addCategory').tokenfield({
      autocomplete: {
        source: (baseURL+"/directory/autocomplete"),
        delay: 100,
        min:2
      },
      showAutocompleteOnFocus: true
    })

$('.addCategory').on('tokenfield:createdtoken', function(e) {
                var id = $(this).attr('id');
            $.post(baseURL+'/directory/add_skill', {
                tag : e.attrs.value,
                tagId : e.attrs.id,
                contractorId : id
            }, function(response) {
                if (response.success == 200) {
                     /* ... */
                } else if (response.error == 400) {
                    /* ... */
                }
            }, 'json');
            return false;
        });

draw.dt イベントを使用してページネーションを行い、関数内に Tokenfield を作成すると、Tokenfield を機能させることができることがわかりました。

$('#memberTable').on( 'draw.dt', function () {

   $('.addCategory').tokenfield({  ...continue as written above.

   $('.addCategory').on('tokenfield:createdtoken', function(e) { ...continue as written above. 
});

残念ながら、これは ajax 呼び出しを 2 回実行します。トークンフィールドの ajax 呼び出しが私のコードに 2 回リストされているため、これは理にかなっています。私の質問は次のとおりです。テーブルが再描画されたときに、ページネーション後に Tokenfield を動作させるには、ajax 呼び出しが 2 回発生することはありませんか?

4

1 に答える 1

1

原因

テーブルの初期化後にdraw.dtイベント ハンドラーがアタッチされている場合、最初の描画が発生したときに呼び出されず、後続のイベントに対してのみ呼び出されます。

解決

テーブルの初期化の前にイベント ハンドラーをアタッチできます。以下を参照してください。イベント ハンドラー内で一度だけトークン フィールドを初期化する必要があります。

$('#memberTable').on( 'draw.dt', function () {
   $('.addCategory').tokenfield({  /* skipped */ });.
   $('.addCategory').on('tokenfield:createdtoken', function(e) {  /* skipped */ });
});

$('#memberTable').dataTable({ /* skipped */ });

別の解決策は、drawCallbackオプションを使用して描画イベントを処理することです。

$('#memberTable').dataTable({ 
   drawCallback: function(){
       $('.addCategory').tokenfield({  /* skipped */ });.
       $('.addCategory').on('tokenfield:createdtoken', function(e) {  /* skipped */ });
   },
   /* skipped */
});

リンク

例と詳細については、「jQuery DataTables: カスタム コントロールが 2 ページ目以降で機能しない」を参照してください。

于 2016-03-09T12:21:17.800 に答える