jqueryデータテーブルには1つのブレークポイントしかありません

Question

したがって、比較のために選択された項目のユーザ定義数に基づいて可変列番号表があります。私は、次の指定された：

responsive: { 
 
        details: { 
 
         display: $.fn.dataTable.Responsive.display.childRowImmediate, 
 
         type: 'column' 
 
        }

Iが得る効果は、各列が特定の最小レベルまで縮小することである右端の列が消えた後にコンテンツがその第二の行にプッシュされます次の列の直下に、消えた列を表す行頭文字が表示されます。画面をさらに縮小すると、追加の箇条書きが表示され、同じように追加の列が消えます。

私がしたいことは、言い換えると1つのブレークポイントしか持たないため、特定の重要な幅（つまり、最初の（最も右の）列が消える列）ですべての列がその箇条書きのリスト現在の動作の問題点は、たとえば、列ヘッダーを持つ3列と、1列のスパン列と1つの箇条書き（またはいくつかの箇条書き）を持つ行の2行を持つことは、それほど直観的ではないということです。だから私の考えは、箇条書きのリスト、またはヘッダー付きの列のセットを表示しますが、それはかなり混乱する可能性があるので、組み合わせではありません。しかし

、私はのようにカスタムのブレークポイントを指定してみてください：

breakpoints: [ 
 
\t \t \t { name: 'desktop', width: Infinity }, 
 
\t \t \t { name: 'phone', width: 480 } 
 
\t \t ]

任意の効果を持っていないようです。この種のことが可能かどうか、そしてそれを実装するのが熱いのかどうか疑問に思うだけですか？

Answer 1

プラグインをしばらく再生した後、少なくとも1つの方法は、ヘッダーごとにクラスを指定して、プラグインに列として表示する最小値を指定することです特定の列ヘッダーのクラスに使用できるブレークポイントと論理接頭辞が組み込まれています - "min-destkop"または特定の予め定義されたピクセル幅を持つ "min-tablet-p"（ポートレートモードのタブレット用）ですが、ブレークポイントオブジェクトを使ってカスタムのものを定義することもできます。ブレークポイント後のブレークポイントからブレークポイントまでの最小値：

$(document).ready(function() { 
 
     $('#content_0_main_1_GridView1 th:nth-child(1)').addClass("min-tablet-l"); 
 
     $('#content_0_main_1_GridView1 th:nth-child(2)').addClass("min-tablet-l"); 
 
     $('#content_0_main_1_GridView1 th:nth-child(3)').addClass("min-tablet-l"); 
 
     $('#content_0_main_1_GridView1 th:nth-child(4)').addClass("min-tablet-l") 
 
      $('#content_0_main_1_GridView1').DataTable({ 
 
       searching: false, 
 
       
 
       bPaginate: false, 
 
       ordering: false, 
 
        
 
       
 
       autoWidth: false, 
 
       responsive: { 
 
        breakpoints: [ 
 
      
 
        { name: 'desktop', width: Infinity }, 
 
          { name: 'tablet-l', width: 1024 }, 
 
          { name: 'tablet-p', width: 623 }, 
 
          { name: 'mobile-l', width: 480 }, 
 
          { name: 'mobile-p', width: 320 } 
 
      
 
        ], 
 
        details: { 
 
         display: $.fn.dataTable.Responsive.display.childRowImmediate, 
 
         type: 'column' 
 
        } 
 
       } 
 
        
 
      }); 
 
     });

彼らはC＃のGridViewのを経由して自動生成されているので、基本的に、私は手動でjQueryを使ってこれらの列ヘッダのクラスを変更しています。私の目標は、同じページの異なる無関係のテーブルがその時点で壊れていたため、640ピクセルでブレークさせることでした。これを行うためには、640でタブレット-pを設定し、ブレークポイントの最小値に設定されているクラスをそのクラスよりも大きくする必要がありました。おそらくもっと簡単で簡単な方法がありましたが、これはうまくいきました。まあ、それは主に働いた。実際には657程度で壊れていたので、正確にはパディングが行われているかもしれないので、640pxで実際に破棄するためには、タブレットのP値を微調整する必要がありました。