web-dev-qa-db-ja.com

jQuery Datatable-デフォルトの「Processing」テキストの代わりにカスタムロードGIFを配置する

JQuery Datatableの現在のバージョンを使用しています。サーバー側の処理を実装しました。デフォルトのテキスト「Processing」の代わりに独自のローディング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"
    }],
  });

[〜＃〜]更新[〜＃〜]

これは処理のための私の更新されたJSコードです：

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

これはうまくいきませんでした。パスを間違った手法で含めていますか？

javascriptjqueryajaxdatatablesdatatables-1.10
7
Mr.SK

これを見てください[〜＃〜] 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>"}
    });

}）

6
Offir Pe'er

誰かがその場所にfontawesomeアイコンを持ちたい場合に備えて、以下を使用できます。

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

解決済み：-

最初は間違った方法でパスを含めていました。
@ Offir Pe'erを使用してそれを機能させましたバージョンie 1.10構文）。

これは私のコードが今どのように見えるかです：-

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

そのため、以前に更新したコードから「〜」を削除する必要がありました。

これが私のディレクトリ構造です：

-ルートフォルダ

  • コンテンツ

    • 画像

      • loadingNew.gif

  • スクリプト

    • MyJSFile.js
3
Mr.SK