Question

我有一个像这样的DataTable：

正如您所看到的，翻译在我的项目中无法正常运行。有些字段是翻译的，有些则不是。如果单击语言按钮（右上角），则只会动态转换DataTable的某些标题，其余标题保持不变（不知道为什么）。此外，单击“语言”按钮时，表格的按钮（上一页，下一页，搜索表单）不会更改。

这是项目的结构：

页面HTML：

<div ng-cloak>
<div class="row">
    <div class="col-md-4">
        <span class="metlife img-responsive img-rounded"></span>
    </div>
    <div class="col-md-8">
        <h1 translate="webclientesApp.recibo.home.title">Recibos</h1>
    </div>
</div>
<div>
    <jhi-alert></jhi-alert>
    <tabla-recibos></tabla-recibos>
</div>

此<tabla-polizas></tabla-polizas>只需调用DataTable视图tabla-recibos.html：

<div class="row">
    <div class="col-xs-12">
        <table id="tabla-recibos" class="table table-hover dataTable">
            <thead>
                <tr>
                    <th><span data-translate="webclientesApp.recibo.numRecibo">NÃºm. de pÃ³liza</th>
                    <th><span data-translate="webclientesApp.recibo.numPoliza">Expediente</th>
                    <th><span data-translate="webclientesApp.recibo.importe">Nombre del tomador</th>
                    <th><span data-translate="webclientesApp.recibo.fechaPago">Nombre del asegurado</th>
                    <th><span data-translate="webclientesApp.recibo.estado">Estado</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="5" class="dataTables_empty">{{language.emptyTable}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

整个组件在此指令中进行管理：

(function() {
'use strict';

angular
    .module('webclientesApp')
    .directive('tablaPolizas', tablaPolizas);

tablaPolizas.$inject = ['Principal', '$timeout'];


function tablaPolizas (Principal, $timeout) {
    var directive = {
        scope: {},
        templateUrl: 'app/components/tabla-polizas/tabla-polizas.html',
        controller: function() {

        },
        controllerAs: 'vm',
        link: linkFn,
    }

    return directive;


    function linkFn($scope, $element, $attrs, $ctrl) {

        Principal.identity().then(function(account) {

            var vm = $ctrl;
            vm.lenguaje = null;

            function obtenerIdioma(){
                vm.lenguaje = account.langKey;
                console.log (vm.lenguaje);
                return '../../i18n/' + vm.lenguaje +'/tablas.json'
            };

            $ctrl.dniUser = account.dni;

            $element.find('#tabla-polizas').DataTable({
                autowidth: true,
                pageLength: 5,
                ajax: {
                    url: '/api/policies/getAllPolicyByDni/dni/' + $ctrl.dniUser,
                    type: "GET",
                    dataSrc: '',
                    'error': function(jqXHR, exception){
                    },
                    statusCode: {
                        200: function(){
                            console.log ('200 OK')
                        },
                        204: function(){
                            console.log('204 Sin Sin datos')
                        },
                        400: function(){
                            console.log('400 Solicitud incorrecta');
                            $('#tabla-polizas tbody')
                            .empty()
                            .append('<tr><td colspan="6" class="dataTables_empty">Ha ocurrido un problema al tratar de cargar las pólizas</td></tr>')
                        },
                        500: function(){
                            console.log('500 Error interno del servidor');
                            $('#tabla-polizas tbody')
                            .empty()
                            .append('<tr><td colspan="6" class="dataTables_empty">Ha ocurrido un problema al tratar de cargar las pólizas</td></tr>')
                        }
                    }

                },
                columns: [
                    { data: "numPoliza" },
                    { data: "primaAnual" },
                    { data: "producto" },
                    { data: "mediador" },
                    { data: "fechaEfecto" },
                    { data: "estado" }
                ],
                language: {
                    url: obtenerIdioma()
                },
            });
        });
    }
}


})();

西班牙语和英语翻译在i18n文件夹中。 policy.json 文件加载表格的标题，以及其他内容（例如视图的标题）：

{
    "webclientesApp": {
        "policy" : {
            "home": {
                "title": "Policies",
                "createLabel": "Crear nuevo Policy",
                "createOrEditLabel": "Crear o editar Policy"
            },
            "created": "Un nuevo Policy ha sido creado con el identificador {{ param }}",
            "updated": "Un Policy ha sido actualizado con el identificador {{ param }}",
            "deleted": "Un Policy ha sido eliminado con el identificador {{ param }}",
            "delete": {
                "question": "Â¿Seguro que quiere eliminar Policy {{ id }}?"
            },
            "detail": {
                "title": "Policy"
            },
            "numPoliza": "Num Poliza",
            "primaAnual": "Prima Anual",
            "producto": "Producto",
            "mediador": "Mediador",
            "fechaEfecto": "Fecha Efecto",
            "estado": "Estado"
        }
    }
}

tablas.json 加载其余文本资源（搜索表单，表格按钮......）：

{
    "emptyTable":       "No data available in table",
    "info":             "Showing _START_ to _END_ of _TOTAL_ entries",
    "infoEmpty":        "Showing 0 to 0 of 0 entries",
    "infoFiltered":     "(filtered from _MAX_ total entries)",
    "infoPostFix":      "",
    "lengthMenu":       "Show _MENU_ entries",
    "loadingRecords":   "Loading...",
    "processing":       "Processing...",
    "search":           "Search:",
    "zeroRecords":      "No matching records found",
    "paginate": {
        "first":        "First",
        "previous":     "Previous",
        "next":         "Next",
        "last":         "Last"
    },
    "aria": {
        "sortAscending":    ": activate to sort column ascending",
        "sortDescending":   ": activate to sort column descending"
    },
    "decimal":          "",
    "thousands":        ",",
    "error": "There was a problem trying to load the receipts"   
}

在此状态下，DataTable的字符串将不会动态转换（如果有的话）。我正在尝试按照here的答案，销毁表格然后重新生成它，但我不知道这是我的解决方案，也不知道如何在我的项目中开发它。另外，我跟着this问题，但如果它与我的问题完全相关，我就不会这样做。最后，虽然我已经在Internationalisation plug-ins位进行了研究，但我找不到关于文档的任何建议。

为了以防万一，我已经中途接管了这个项目，所以AngularJS和JQuery有很多功能，坦率地说它们根本就没有掌握。

所以，总结一下：

如何动态翻译标题，单元格字符串以及搜索表单，按钮等？

我真的很感激这里的一些帮助。

DataTables - 无法动态转换表字符串

0 个答案: