jQuery Prepend 到 DataTables 分页

Posted 2023-05-09

【中文标题】jQuery Prepend 到 DataTables 分页

【英文标题】：jQuery Prepend to DataTables Pagination

【发布时间】：2017-11-04 01:38:05

【问题描述】：

我有一个 jQuery DataTables（最新下载），我试图在底部的分页控件旁边显示加载动画。它应该很简单，并且以下代码的一部分可以工作：

$("#table_main_paginate").css("width", "50%");
$("#table_main_paginate").prepend($("<div> jjjj </div>"));

上面的代码是在 DataTable 已经初始化并且 CSS 的 width 确实有效之后。但是第二行代码不起作用。我的 javascript 文件是在加载其他 javascript 文件后加载的，上面的代码在 documentReady 函数内。

那么发生了什么？

谢谢！

【问题讨论】：

分享你的 html

谢谢。但它非常大。基本上， var mainTable = $('#table_main').DataTable( .... );然后上面的代码。

试试setTimeout(function() //your code ,2000) 看看是否有效

是的，确实如此！但是，Div 显示在顶部/未对齐。谢谢！

@Meengla 但是有时 jquery 插件需要一些时间才能完全初始化，您也可以将 setTimeout 时间更改为 500 以便它更快地运行

【参考方案1】：

试试这个：

setTimeout(function() 
   $("#table_main_paginate").css("width", "50%");
   $("#table_main_paginate").prepend($("<div> jjjj </div>"));
,2000);

但是，有时 jquery 插件需要一些时间才能完全初始化

【讨论】：

是的，这确实有效，但超时值为 2000；在 500 的情况下，它似乎没有。此外，在第一个分页事件之后，前置不起作用 - 大概是因为这是服务器端，所以表被重绘。我会尝试修复它，但可能会继续显示分页下方的 div。谢谢@Mahesh！

@Meengla 欢迎您！！如果是服务器端，那么您可以为您的dataTable ajax 使用"dataSrc": function() 回调函数，以便在ajax 请求完成后在每个页面上添加此代码

您可以查看我最近的回答，了解dataSrc 的工作原理here