Angular数据表中的自定义加载 [英] Custom loading in Angular Datatables

问题描述

im试图在角度数据表中实现我的自定义加载.我检查了文档: https://l-lin.github.io/angular- datatables/#/overrideLoadingTpl ，建议实现:

im trying to implement my custom loading in angular datatables. I checked the docs :https://l-lin.github.io/angular-datatables/#/overrideLoadingTpl, there suggest an implementation:

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

因此，在我的自定义选项中，我将负荷注入到选项 sLoadingRecords 和 sProcessing 中，但不起作用.

So, in my custom Options i inject the loading in the option sLoadingRecords and sProcessing, but doesnt works.

    .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])*/
      }

推荐答案

我遇到了同样的问题；在调查了源代码之后，事实证明它非常简单. datatables.options应该作为与所有其他dataTables功能完全相同的依赖项注入:

I had the same problem; after investigating the source it turns out to be quite simple. datatables.options should be injected as a dependency exactly as all the other dataTables features :

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

])

然后，还应包含DTDefaultOptions服务(例如):

Then the DTDefaultOptions service should be included as well (example) :

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

现在可以通过以下示例更改默认的<h3>Loading...</h3>模板:

Now the default <h3>Loading...</h3> template can be changed by (example) :

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

Loading ...元素与dataTables语言设置无关，但是是angular dataTables自己的初始化消息.顺便说一句，可以通过CSS类.dt-loading设置样式:

The Loading... element has nothing to do with dataTables language settings, but is angular dataTables own initialisation message. BTW this element can be styled through the CSS class .dt-loading :

.dt-loading {
  color: red;
}

这篇关于Angular数据表中的自定义加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！