JQuery Datatable - 如何替换默认的“Processing”文本，使用自定义加载GIF动画？

Question

我正在使用当前版本的JQuery Datatable。我已经实现了服务器端处理。是否有任何方法可以放置我们自己的加载GIF而不是默认文本“处理中”？

以下是我的HTML代码：

<table id="table" class="table table-striped table-bordered table-hover display nowrap" cellspacing="0" width="100%">
  <thead>
    <tr bgcolor="#76b900">
      <th> Request #</th>
      <th>Description</th>
      <th>Created By</th>
    </tr>
  </thead>
</table>

这是我的JS代码：

$('#table').DataTable({
    "dom": '<"top"lB>rt<"bottom"ip>', // DataTable element position


    "lengthMenu": [
      [10, 25, 50, 100, 500],
      [10, 25, 50, 100, 500]
    ], // page length options
    "pageLength": 25, // default page length
    "pagingType": "full_numbers", // pagination related buttons

    "ordering": true,
    "order": [
      [0, "desc"]
    ],

    "scrollX": true, // enables horizontal scrolling      
    "filter": true,
    "responsive": true,
    "serverSide": true,
    "info": true, // control table information display field
    "processing": true,
    "stateSave": true, //restore table state on page reload,

    "ajax": {
      "url": Helper.baseUrl() + "Search/LoadData",
      "type": "POST",
      "datatype": "json",
      "data": function(d) {
        d.searchParams = searchFilters();
      },
    },

    "columns": //Binds values fetched from the database to their respective columns
      [{
      "data": "RequestNo",


    }, {
      "data": "Description"
    }, {
      "data": "CreatedBy"
    }],
  });

更新

这是我针对 Processing 的更新的 JS 代码：

"language": {
            "infoFiltered":"",
            "processing": "<img src='~/Content/images/loadingNew.gif' />"
        },

这个方法没有起作用。我是不是在引入路径的方式上有错误？

- Mr.Human

---

Fiddle似乎无法工作。 - Anurag Sinha

实际上，我只是放置了我的代码样本。（因为我正在从服务器获取数据）这就是它没有显示数据的原因。 - Mr.Human

无论如何，已将其移除。 - Mr.Human

@Mr.SK，为什么我的答案不够好？ - Offir

Answer 1

如果有人想在那个位置使用fontawesome图标，可以使用以下方法：

"language": 
{          
"processing": "<i class='fa fa-refresh fa-spin'></i>",
}

- MR_AMDEV

Answer 2

看一下我制作的DEMO。

  var table = $('#changeLogTable').DataTable({
        "bLengthChange": false,
        "bPaginate": true,
        "bInfo": false,
        "autoWidth": false, 
        "order": [[0, "desc"]],
        "processing": true,
        "serverSide": true,
        "sAjaxSource": "data.js",
         oLanguage: {sProcessing: "<div id='loader'></div>"}
    }); 

})

- Offir

---

我之前的代码没有起作用。然后我尝试使用当前版本的语法。我已经在我的问题中包含了更新后的代码，请检查一下。 - Mr.Human

你在控制台中有任何错误吗？@Mr.SK，你能创建一个fiddle吗？ - Offir

没有。那是我检查的第一件事。控制台没有错误。 - Mr.Human

尝试给出图像的完整路径。@Mr.SK - Offir

太棒了！运行得非常完美。谢谢！ - Mauro Bilotti

Answer 3

问题已解决：-

最初我错误地包含了路径。
使用@Offir Pe'er的答案，我使其工作起来了（目前在我的代码中唯一修改的是我使用了当前版本即1.10的语法）。

这是我的代码现在的样子：

"language": 
{          
"processing": "<img style='width:50px; height:50px;' src='Content/images/loadingNew.gif' />",
}

所以我刚刚不得不从先前更新的代码中删除'~'。

这是我的目录结构：

-根文件夹

• 内容

  • 图片

    • loadingNew.gif

• 脚本

  • MyJSFile.js

- Mr.Human

---

很高兴我能帮到你。 - Offir