Question

因此，我们有一个基于用户定义的项目数量的可变列数表，用于比较。我有以下指定：

＆＃13;

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

＆＃13;

我得到的效果是每列都缩小到某个最低级别，之后最右边的列消失，内容被推送到第二行，第二行显示在后续的行中，子弹代表刚刚消失的列。缩小屏幕进一步导致额外的列以相同的方式消失，其他子弹代表它们。

我想要做的只是有一个断点可以这么说，所以在某个临界宽度（即第一个（最右边）列会消失的那个），然后所有的列都被推到那个项目符号列表。目前它的工作方式的问题在于，例如，具有列标题的3列，以及仅具有一个跨越列和子弹（或几个子弹）的下面的另一行不是非常直观。所以我的想法是将其显示为项目符号列表，或者是一组带有标题的列，但不是组合，因为这可能会让人感到困惑。

但是，当我尝试在：

中指定自定义断点时

＆＃13;

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

＆＃13;

它似乎没有任何效果。只是想知道这种事情是否可能，以及如果实施起来如此热门？

Answer 1

在使用插件一段时间之后，我确定至少有一种方法是为每个标题指定一个类，告诉插件最小的一个用于将其显示为列（并以其他方式显示）它可以作为下面的子弹，根本不显示它等等，具体取决于所选的其他选项。内置的断点和逻辑前缀可用于给定列标题的类-eg＆＃34; min-destkop＆具有特定预定义像素宽度的＃34;或者＃34; min-tablet-p＆＃34;（对于平板电脑处于纵向模式）。但是您也可以通过断点对象定义自定义像素。但这有点棘手。我发现我必须定义所有这些并将断点设置为断点后的断点：

＆＃13;

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

＆＃13;

基本上，我使用jquery手动更改这些列标题的类，因为它们是通过C＃gridview自动生成的。我的目标是让它在640px时突破，因为同一页面上的另一个不相关的表在此时断开。为了做到这一点，我需要设置640的tablet-p，并将断开的类设置为比这更大的断点的最小值。也许有一种更简单，更直接的方式，但这很有效。嗯，它主要起作用。事实证明，可能是由于填充，不确定，它实际上是在657左右突破，所以我不得不稍微调整一下这个tablet-p值以使其达到640px的实际中断...

在jquery数据表中只有一个断点

1 个答案: