it-swarm.com.de

JQuery Datatable - Platzieren Sie eine benutzerdefinierte LadegIF anstelle des Standardtextes "Processing"

Ich verwende die aktuelle Version von JQuery Datatable. Ich habe serverseitige Verarbeitung implementiert. Gibt es eine Möglichkeit, unser eigenes Loading GIF anstelle des Dafault-Textes "Processing" zu platzieren?

Hier ist mein 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>

Hier ist mein 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

Dies ist mein aktualisierter JS-Code für die Verarbeitung:

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

Das hat nicht funktioniert. Füge ich den Pfad in falscher Technik ein?

5
Mr.SK

Schauen Sie sich dieseDEMOan, die ich gemacht habe.

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

})

5
Offir Pe'er

Für den Fall, dass jemand ein fontawesome-Symbol an dieser Stelle haben möchte, kann Folgendes verwendet werden:

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

Gelöst: -  

Anfangs hatte ich den Pfad falsch eingefügt.
Mit @Offir Pe'er answer habe ich es zum Laufen gebracht (mit der einzigen Änderung in meinem Code ist, dass ich die aktuelle Version verwendet habe, d. H. 1.10-Syntax).

So sieht mein Code jetzt aus: -

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

Also musste ich einfach das '~' aus meinem zuvor aktualisierten Code entfernen.

Hier ist meine Verzeichnisstruktur:

-Root-Verzeichnis

  • Inhalt 

    • Bilder 

      • loadingNew.gif
  • Skripte

    • MyJSFile.js
1
Mr.SK