コンソール：ReferenceError：stopPropagationが定義されていません

Question

ここに問題がありますか？私は必要な検索を取得しますが、完全一致正規表現の列を使用している場合は、テーブルを再描画しません。私は数値であるランキング値をよりよくフィルタリングするために単一の列を使用しています。

<script> 
jQuery(document).ready(function() { 
    // Setup - add a text input to each header cell 
    jQuery('#table1 thead tr#filterrow th').each(function() { 
     var title = jQuery('#table1 thead th').eq(jQuery(this).index()).text(); 
     jQuery(this).html('<input type="text" onclick="stopPropagation(event);" placeholder="Search '+title+'" />'); 
    }); 
    // Setup - add a text input to each footer cell 
    jQuery('#table1 tfoot tr#filterrow th').each(function() { 
     var title = jQuery('#table1 tfoot th').eq(jQuery(this).index()).text(); 
     jQuery(this).html('<input type="text" onclick="stopPropagation(event);" placeholder="Search '+title+'" />'); 
    }); 
    // DataTable 
var table = jQuery('#table1').DataTable({ 
    orderCellsTop: true, 
       aLengthMenu: [[-1, 10, 25, 50, 100, 200, 300, 400, 500],[ "All", 10, 25, 50, 100, 200, 300, 400, 500]], 
       iDisplayLength: -1, 
     dom: 'B<"lb">lfrtip', 
       responsive: 'true', 
     buttons: [ 
      { extend: 'copy', 
       oSelectorOpts: { 
        filter: 'applied' 
       } 
      }, 
      { extend: 'csv', 
       oSelectorOpts: { 
        filter: 'applied' 
       } 
      }, 
      { extend: 'pdfHtml5', 
       oSelectorOpts: { 
        filter: 'applied' 
       } 
      }, 
      { extend: 'print', 
       autoPrint: false, 
       oSelectorOpts: { 
        filter: 'applied' 
       } 
      } 
      ] 
}); 
    // Apply the filter 
    jQuery("#table1 thead input").on('keyup change', function() { 
     table 
      .column(jQuery(this).parent().index()+':visible') 
      .search(this.value) 
      .draw(); 
    }); 
    jQuery("#table1 tfoot input").on('keyup change', function() { 
     table 
      .column(jQuery(this).parent().index()+':visible') 
      .search(this.value) 
      .draw(); 
    }); 
    jQuery("#table1 thead input").on('keyup change', function() { 
     table 
      .column(4) 
      .search("^" + this.value + "$", true, false, true) 
      .draw(); 
    }); 
    jQuery("#table1 tfoot input").on('keyup change', function() { 
     table 
      .column(4) 
      .search("^" + this.value + "$", true, false, true) 
      .draw(); 
    }); 
    function stopPropagation(evt) { 
     if (evt.stopPropagation !== undefined) { 
      evt.stopPropagation(); 
     } else { 
      evt.cancelBubble = true; 
     } 
    } 
}); 
</script> 

私のコードでは何かが凝縮されているように感じます。

Answer 1

stopPropagation()メソッドがreadyイベントハンドラ内で定義されており、その外側に表示されないという問題があります。

移動定義readyイベントハンドラのstopPropagation()外：あなたは以下のコードと同じ書き換える可能性のjQueryを使っているので

jQuery(document).ready(function() { 
    // ... skipped ... 
}); 

function stopPropagation(evt) { 
    if (evt.stopPropagation !== undefined) { 
     evt.stopPropagation(); 
    } else { 
     evt.cancelBubble = true; 
    } 
} 

NOTES

• 。 clickイベントハンドラは、readyイベントハンドラ内に配置できます。

• フッターとヘッダーの各input要素にkeyup changeを2回割り当てています。 this exampleのようにコードを書き換えることを検討してください。