javascript - JQuery Datatable - Placing a custom loading GIF instead of default "Processing" text - Stack Over

admin管理员组

文章数量:1180477

I'm using the current version of JQuery Datatable. I have implemented server-side processing. Is there any way to place our own Loading GIF instead of the dafault text "Processing"?

Here's my HTML code :

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

Here's my JS code :

$('#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"
    }],
  });

UPDATE

This is my updated JS code for Processing :

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

This didn't work. Am I including the path in wrong technique?

I'm using the current version of JQuery Datatable. I have implemented server-side processing. Is there any way to place our own Loading GIF instead of the dafault text "Processing"?

Here's my HTML code :

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

Here's my JS code :

$('#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"
    }],
  });

UPDATE

This is my updated JS code for Processing :

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

This didn't work. Am I including the path in wrong technique?

• javascript
• jquery
• ajax
• datatables
• datatables-1.10

Share Improve this question Follow edited Nov 3, 2017 at 6:27 Mr.Human asked Jan 1, 2017 at 10:37 Mr.HumanMr.Human 61722 gold badges1515 silver badges3333 bronze badges 4

• Fiddle doesn't seem to work – Anurag Sinha Commented Jan 1, 2017 at 11:06
• Actually I have just placed a sample of my code. (As I'm fetching data from server)That's the reason it's not showing data – Mr.Human Commented Jan 1, 2017 at 12:25
• Anyways removed it. – Mr.Human Commented Jan 1, 2017 at 12:26
• @Mr.SK , why my answer doesn't cut it? – Offir Commented Jan 8, 2017 at 14:45

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 11

Just in case if someone wants to have fontawesome icon in that place the following can be used:

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

Take a look at this DEMO I have made.

  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>"}
    }); 

})

SOLVED :-

Initially I had included path in a wrong manner.
Using @Offir Pe'er answer I got it working (with the only modification currently in my code is that I've used current version i.e. 1.10 syntax).

This is how my code looks now :-

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

So I just had to remove the '~' from my previously updated code.

Here's my directory structure :

-Root Folder

• Content

  • Images

    • loadingNew.gif

• Scripts

  • MyJSFile.js

本文标签：