是否可以在 jQuery-DataTables 中顯示來自 HTML 的數據的微調器/加載消息？

Question

我們的服務器正在渲染一個<table>元素，其中包含大約 1000 行 HTML 數據。 客戶端 JS 然后從這個HTML 數據初始化 DataTable。 但是，在客戶端上大約需要 3-5 秒才能完全初始化 DataTable 並顯示分頁。 在此期間，完整的 1000 行在 DOM 中呈現並可見。 我沒有在 DataTable 文檔中找到它，但是有沒有辦法在處理 dom HTML 的數據表時顯示“處理”消息或微調器？

這樣的選項可用於 ajax 或服務器端處理源，但沒有找到它用於 HTML 數據源。

Answer 1

您在數據表配置中添加了以下選項。

"processing": true &   oLanguage: {sProcessing: "<div id='loader'></div>"}

假設我們認為您的表 id 是“示例”。

JS代碼：

$('#example').DataTable( {

         "processing": true,
        responsive: true,
        oLanguage: {sProcessing: "<div id='loader'></div>"}
});

加載器的 CSS：

 #loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin-left:200px;
  margin-top:30px;
}   

注意：您已根據數據表調整 css

對於工作示例，您訪問以下鏈接：

http://jsfiddle.net/dipakthoke07/ebRXw/3302/