Jquery 使用工作台尺寸动态和响应地对中装载机图像

我正在使用DataTables构建一个表。我希望使用我自己的加载器图像和一个简单的透明背景，而不是DataTable的

处理

指示器（默认或自定义的），因为当记录很少时，它不能正确居中

如何使用表维度动态和响应地将加载程序（图像+背景）居中

以下是中心化装载机的两个示例：

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

---

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

事实上，默认微调器居中。因为你的列是不相等的，所以它看起来不合适。您可以通过两种方式解决此问题：

• a） 将微调器移动到“look”居中（我不会走这条路线）
• b） 使中心列在表中实际居中

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

#FactoryTable td:第一个孩子，#FactoryTable td:最后一个孩子{
宽度：30%；
}

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

在一般情况下，执行此操作的方法是将要居中的项目放置在要居中的容器内，给出容器

位置：relative

和child

{
位置：绝对位置；
最高：50%；
左：50%；
身高：100%；
宽度：100%；
转换：翻译（-50%，-50%）；
}

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

这是你对我所提到的一切的看法。重点是：

• 使用flexbox在#微调器中定心图像
• 使

  第一个孩子

  和

  最后一个孩子

  td相等，因此中间的孩子实际上居中
• 将脚本放置在函数（

  resizeSpinner（）

  ）的表顶部，该函数在窗口

  resize

  和

  load

  事件中被调用。注意：您还应该在任何其他可以改变表大小的javascript代码之后触发此函数

---

仔细查看生成的代码，还有两件事需要添加：

• 当您启动

  DataTable

  实例时，您可以安全地（并且应该）将其放入

  table

  var中。事后尝试这样做会导致重新启动，这显然是不应该发生的。您所做的是初始化DataTable，然后将它扔掉以再次初始化它，这样您就可以将它放在

  table

  var中
• 原则上，可以避免对

  滚动

  或

  调整大小

  事件进行绑定（如上所述）

在这种情况下，我们正在进行的DOM操作很小，很难相信任何设备/浏览器组合在每个浏览器上执行

resizeSpinner（）

函数时都会遇到问题，但是，出于原则和良好实践的考虑，您应该加载一个名为的小型库，它使我们能够限制函数（指定函数后续运行之间的最小间隔）。我并不特别推荐上面的插件，但是，既然您已经使用了

jQuery

，我想应该使用jQuery的等效插件。我个人经常使用

lodash

，这是一个库，它包含了自己版本的

throttle

和

debounce

，语法与jQuery插件略有不同。
要了解油门和去盎司之间的具体区别，请阅读

因此，您的小提琴改进版将是：

var-table=$（'#FactoryTable'）。数据表({
“dom”：“tipr”，
“pagingType”：“简单”，
});
表.行.添加（[1,2,3]）.绘制（假）；
表.行.添加（[1,2,3]）.绘制（假）；
表.行.添加（[1,2,3]）.绘制（假）；
表.行.添加（[1,2,3]）.绘制（假）；
var resizeSpinner=$.throttle（100，false，function（）{
var fH=“#FactoryTable”，
thh=$（fH+thead'）。高度（）；
$（“#微调器”）.css({
高度：（$（fH）.height（）-thh）+“px”，
顶部：thh+‘px’
});
})
resizeSpinner（）；
$（窗口）。在（'load resize'，resizeSpinner'）上
th，
运输署{
文本对齐：居中；
垂直对齐：中间对齐；
}
.表格压缩>tbody>tr>td，
.表格压缩>tbody>tr>th，
.表格压缩>tfoot>tr>td，
.表格压缩>tfoot>tr>th，
.table condensed>thead>tr>td，
.table condensed>thead>tr>th{
填充物：5px；
}
身体{
保证金：0；
}
#纺纱机{
位置：绝对位置；
排名：0；
宽度：100%；
溢出：隐藏；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
/*添加此项可使左右列相等，
*因此，将表格中中心列的内容居中
*但请记住，对于任何超过3列的表，30%是无效的
*列宽太大。
*/
#FactoryTable td：第一个孩子，
#FactoryTable td：最后一个孩子{
宽度：30%；
}

地区
部门
团队
可以使用普通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;
}

可以找到小提琴。
谢谢！这种方法很有趣，但不能正常工作。你可以在小提琴中看到，如果它不是集中的（同样，用一行或两行的表格试试，它会更突出）