以表格尺寸动态和响应地将装载机图像对中

Question

我使用DataTables构建表格。我想使用我自己的装载机图片，使用简单的透明背景而不是DataTable的processing指示器（默认或自定义），因为它没有正确居中几条记录。

如何使用表格尺寸动态地响应加载器（图像+背景）？

以下是集中式加载器的两个示例：

Current (wrong) Fiddle

澄清（感谢@Andrei Gheorghiu评论）：

我希望加载器以行区域为中心，即不包括其页眉，页脚或其他元素的表格 - 如上图所示。

Answer 1

实际上，默认微调器是居中的。它看起来很不好，因为你的列不相等。您可以通过以下两种方式解决：

• a）将微调器移动到“看起来”居中（我不会走这条路）
• b）使中心栏实际上居中于表格中。

对于b），考虑到你有3列，我会用

#FactoryTable td:first-child,#FactoryTable td:last-child {
  width: 30%;
}

我不确定如何在此插件中完成垂直居中，但我现在从您的问题中知道您希望自定义微调器在表格的内容区域中垂直对齐，不包括页眉和页脚。

在一般情况下，您执行此操作的方法是将项目置于要居中的容器中心内，为容器position:relative和子

提供容器

{
  position:absolute;
  top:50%;
  left:50%;
  height: 100%;
  width: 100%;
  transform: translate(-50%,-50%);
}

但这对表来说是不可能的，所以你需要一种不同的方法。您必须创建一个定心容器，将其放置在桌子主体的顶部，然后使用您选择的技术将图像置于内部。这种技术的最大优点是禁用用户在加载表时与表交互的能力，这可以防止系统中的各种故障和错误，无论是后端还是前端 - 端。

这是你updated fiddle到目前为止我所提到的一切。要点是：

• 使用flexbox在#spinner中居中图像
• 使first-child和last-child td相等，使中心实际上居中
• 将位置和大小#spinner的脚本放在一个函数（resizeSpinner()）内的表顶部，该函数在窗口resize和load事件上调用。请注意，您还应该在可以改变表格大小的任何其他javascript代码之后触发此功能。

仔细观察结果代码，还有两件事需要补充：

• 您可以安全地（并且应该）在启动它时将DataTable实例放在table var中。之后尝试这样做会导致重新启动它，这显然不应该发生。你正在做的是初始化DataTable，然后把它扔掉以再次初始化它，所以你把它放在table var里面。
• 对scroll或resize事件的绑定（正如我上面所做的那样）原则上是要避免的。

在这种特殊情况下，我们正在做的DOM操作很小，很难相信任何设备/浏览器组合都会遇到在每个浏览器调整大小时执行resizeSpinner()函数的问题，但是，为了这个缘故在原则和良好实践中，您应该加载一个名为jQuery Throttle/Debounce的小型库，它允许我们限制一个函数（指定函数后续运行之间的最小间隔）。我不特别推荐上面的插件，但是，因为你已经使用jQuery我想应该使用jQuery等价物。我个人经常使用lodash，这是一个包含自己版本的throttle和debounce的库，其语法与jQuery插件略有不同。
要详细了解油门和去抖动之间的具体差异，请阅读this article。

所以小提琴的改进版本将是：

var table = $('#FactoryTable').DataTable({
  "dom": "tipr",
  "pagingType": "simple",
});

table.row.add([1, 2, 3]).draw(false);
table.row.add([1, 2, 3]).draw(false);
table.row.add([1, 2, 3]).draw(false);
table.row.add([1, 2, 3]).draw(false);

var resizeSpinner = $.throttle(100, false, function() {
  var fH = '#FactoryTable',
      thh = $(fH + ' thead').height();
  $('#spinner').css({
    height: ($(fH).height() - thh) + 'px',
    top: thh + 'px'
  });
})
resizeSpinner();
$(window).on('load resize', resizeSpinner);

th,
td {
  text-align: center;
  vertical-align: middle;
}

.table-condensed>tbody>tr>td,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>td,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>thead>tr>th {
  padding: 5px;
}

body {
  margin: 0;
}

#spinner {
  position: absolute;
  top: 0;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* add this to make left and right columns equal,
 * thus centering the contents of the center column in the table 
 * but keep in mind for any table with more than 3 columns 30% is 
 * too much for a column width.
 */

#FactoryTable td:first-child,
#FactoryTable td:last-child {
  width: 30%;
}

<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>

<div id="Table">
  <table class="table table-bordered table-condensed table-responsive cell-border" id="FactoryTable">
    <thead>
      <tr class="active">
        <th>District</th>
        <th>Department</th>
        <th>Team</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <span id="spinner" class="myspinner"><img src="http://www.snacklocal.com/images/ajaxload.gif"></span>
  <span id="transp"></span>
</div>

它可能会被清理得更多，但我对你项目的其余部分一无所知，所以我会保持原样。不要忘记prefix CSS。

Answer 2

可以使用纯CSS创建此效果。您可以继续删除

var height = $('#FactoryTable').height();
var width = $('#FactoryTable').width();
$("#spinner").css('top', height * 0.50);
$("#spinner").css('left', width * 0.50);
$("#transp").css('height', height * 0.50);
$("#transp").css('top', height * 0.50);

来自你的JS。

并添加以下CSS样式：

#Table
{
  position: relative;
}

.myspinner {
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-10%, -50%);
  z-index: 5;
}

#transp {
    position: absolute;
    background: rgba(250,250,250,0.8);
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 4;
}

可以找到小提琴here。