jquery - 以表格尺寸动态和响应地居中加载器图像

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 和 child

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

但这对于表格来说是不可能的，因此您需要一种不同的方法。您必须创建一个居中容器，将其放置在表体的顶部，然后使用您选择的技术将图像居中。这种技术的最大优点是它禁用用户在加载表时与表交互的能力，这可能会防止系统在后端和前端出现各种故障和错误-结束。

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

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

---

仔细观察结果代码，还有两件事要添加:

• 您可以安全地(并且您应该)在启动时将 DataTable 实例放入 table var 中。之后尝试这样做会导致重新启动它，这显然不应该发生。您正在做的是初始化 DataTable，然后将其丢弃以再次初始化它，这样您就可以将它放在 table var 中。
• 原则上应避免绑定(bind) scroll 或 resize 事件(就像我上面所做的那样)。

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

所以你的 fiddle 的改进版本是:

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 .