4

私のカスタムローディングを角度データテーブルに実装しようとしています。ドキュメントを確認しました: https://l-lin.github.io/angular-datatables/#/overrideLoadingTpl、実装を提案します:

   angular.module('showcase', ['datatables']).
factory('DTLoadingTemplate', dtLoadingTemplate);
function dtLoadingTemplate() {
    return {
        html: '<img src="images/loading.gif">'
    };
}

したがって、私のカスタム オプションでは、オプションsLoadingRecordsおよびsProcessingに読み込みを挿入しますが、機能しません。

    .factory('myDTOptions', function (DTOptionsBuilder,DTLoadingTemplate) {

  return {
    option1: function(){
      return DTOptionsBuilder.newOptions()
      .withPaginationType('full_numbers')
      .withDisplayLength(10)
      .withBootstrap()
      .withOption('responsive', true)
      .withLanguage({
            "sEmptyTable":     "No hay información disponible",
            "sInfo":           "Mostrando _START_ a _END_ de _TOTAL_ entradas",
            "sInfoEmpty":      "Mostrando 0 a 0 de 0 entradas",
            "sInfoFiltered":   "(filtrada de _MAX_ entradas totales)",
            "sInfoPostFix":    "",
            "sInfoThousands":  ",",
            "sLengthMenu":     "Mostrando _MENU_ entradas",
            "sLoadingRecords": DTLoadingTemplate,
            "sProcessing":     DTLoadingTemplate,,
            "sSearch":         "Buscar: ",
            "sZeroRecords":    "No se encuentra coincidencias en la búsqueda",
            "oPaginate": {
                        //Dos opciones: https://github.com/DataTables/Plugins/issues/62
                          "sFirst":    '<i class="fa fa-angle-double-left"></i>',
                          "sLast":     '<i class="fa fa-angle-double-right"></i>',
                          "sNext":     '<i class="fa fa-angle-right"></i>',
                          "sPrevious": '<i class="fa fa-angle-left"></i>'
                        },
            "oAria": {
                "sSortAscending":  ": activar para ordenar columna ascendentemente",
                "sSortDescending": ": activar para ordenar columna descendentemente"
              }
        })
        /*
            .withColVis()
            .withColVisOption('aiExclude', [0,1,6,7,8])*/
      }
4

3 に答える 3

8

私は同じ問題を抱えていました。ソースを調べたところ、非常に単純であることがわかりました。datatables.options他のすべての dataTables 機能とまったく同じように、依存関係として注入する必要があります。

angular.module('myModule', [
  'datatables',
  'datatables.buttons',
  'datatables.bootstrap',
  'datatables.fixedheader',
  ...
  'datatables.options', //<---

])

次に、DTDefaultOptionsサービスも含める必要があります（例）：

.controller('myCtrl', ['$scope', 'DTOptionsBuilder', 'DTDefaultOptions',
    function ($scope, DTOptionsBuilder, DTDefaultOptions) {

デフォルトの<h3>Loading...</h3>テンプレートは (例) で変更できます:

DTDefaultOptions.setLoadingTemplate('<em>Fetching data</em> ...')

Loading... 要素は dataTables の言語設定とは関係ありませんが、角度のある dataTables 独自の初期化メッセージです。ところで、この要素は CSS クラスを介してスタイル設定できます.dt-loading。

.dt-loading {
  color: red;
}
于 2016-07-06T05:48:21.823 に答える
3

カスタム html で読み込み div を作成し、これらをセットアップのオプションに追加します。

.withOption('fnPreDrawCallback', function () { console.log('loading..') })
.withOption('fnDrawCallback', function () { console.log('stop loading..') })
  • 「fnPreDrawCallback」で html を表示
  • 「fnDrawCallback」で非表示にします。
于 2016-01-13T14:26:41.620 に答える