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

Question

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

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

我得到的效果是，每一列都缩小到某个最小级别，然后最右边的列消失，内容被推到第二行，该行显示在后面的列的正下方，并带有一个表示刚刚消失的列的项目符号。进一步缩小屏幕会导致其他列以与表示这些列的其他项目符号相同的方式消失。

可以说，我想做的是只有一个断点，这样在某个临界宽度(即第一列(最右边)将消失的宽度)，所有列都将被推送到项目符号列表中。目前它的工作方式的问题是，例如，有3列带有列标题，而下面的另一行只有一个跨区列和一个项目符号(或几个项目符号)，这不是很直观。所以我的想法是要么将其显示为项目符号列表，要么显示为一组带标题的列，但不能显示为组合，因为这可能会非常令人困惑。

但是，当我尝试在中指定自定义断点时

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

它似乎没有任何效果。只是想知道这类事情是否可能，是否很难实现？

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#网格视图自动生成的。我的目标是让它在640像素处中断，因为同一页面上的另一个不相关的表在这一点上中断了。为了做到这一点，我需要将table-p设置为640，并将用于中断的类设置为断点的最小值。也许有一种更简单、更直接的方法，但它奏效了。嗯，它基本上起作用了。事实证明，可能是由于填充，不确定确切的原因，它实际上在657左右时断裂，所以我不得不稍微调整桌面p值，使其实际断裂在640px。。。