在jquery數據表中只有一個斷點

Question

所以我們有一個基於用戶定義的項目數量的變量列表數字表，用於比較。我有以下規定：

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

我得到的效果是，每一列縮小到一定的最低水平，在此之後，最右邊一列消失，並且內容被髮布到第二一行隨後顯示的是一個代表剛剛消失的列的子彈。進一步縮小屏幕會導致額外的列以相同的方式消失，同時附加的子彈代表它們。

我想要做的只是有一個斷點可以這麼說，以便在某個臨界寬度（即第一個（最右邊）列將消失的位置），所有列將被推送到該項目列表。目前它的工作方式的問題在於，例如，具有列標題的3列以及僅具有一個跨欄和一個子彈（或幾個子彈）的另一行不太直觀。所以我的想法要麼是將它顯示爲項目符號列表，要麼是一組帶有標題的列，但不是一個組合，因爲這可能會讓人感到困惑。

然而，當我嘗試指定自定義斷點爲：

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

它似乎沒有任何效果。只是想知道這樣的事情是否可能，如果太熱來實施它？

Answer 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' 
 
        } 
 
       } 
 
        
 
      }); 
 
     });

基本上，我手動更改與jquery這些列標題的類，因爲它們被通過C＃gridview的自動生成。我的目標是讓它在640px中斷，因爲同一頁上的另一個不相關的表正在破壞。爲了做到這一點，我需要將640設置爲tablet-p，並且將斷點設置爲斷點的最小值。也許有一個更簡單，更直接的方法，但這工作。那麼，它主要工作。原來，也許是由於填充，不能確切地說，它實際上是在657左右，所以我不得不調整平板電腦的價值有點讓它實際上在640px中斷...