Angular translate feature does not operate within the custom pagination and information display of an Angular datatable

I have implemented Angular Datatable and Angular Translate in my latest project.

In the datatable, I have customized the pagination & info section as shown below:

var language = {
    "sEmptyTable": "<div class='alert alert-primary text-center m-auto w-25'>" + $filter('translate')('TABLE.S_EMPTY_TABLE') + "</div>",
    ...
};

The datatable's options are set like this:

$rootScope.dtOptions = DTOptionsBuilder.fromSource()
    .withLanguage(language)
    ...
});

app.config

$translateProvider.useStaticFilesLoader({
    prefix: 'app/resources/lang-', 
    suffix: '.json'
 });
 $translateProvider.preferredLanguage('en'); 
 $translateProvider.useSanitizeValueStrategy('sanitize');
 $translateProvider.useLocalStorage();

lang-en.json

...
{
  "TABLE": {
      "S_PROCESSING": "peoesing...",
      ...
}
...

Currently, I am trying to integrate Angular translate into the custom pagination and info section (refer to var language= {}).

I have utilized 

$filter('translate')('GLOBAL.LOADING')
And 
$translate.instant('TABLE.S_PROCESSING')

However, both of them are not functioning correctly, and instead of the translation, they display the string of each translate variable such as: GLOBAL.LOADING or TABLE.S_PROCESSING.

Where could the issue lie?

javascriptangularjsdatatableangular-translateangular-datatables

Answer №1

My intention was to utilize $translate before any translation occurred, but this approach wasn't yielding the desired results. Instead, I opted to employ the $translateChangeSuccess event, a part of the Angular Translate events, and within its callback function, invoke a function containing the necessary datatable options and configurations.

$rootScope.$on('$translateChangeSuccess', function (event) {
    initializeDatatable();
});


function initializeDatatable() {

  var language = {
    "sEmptyTable": "<div class='alert alert-primary text-center m-auto w-25'>" + $filter('translate')('TABLE.S_EMPTY_TABLE') + "</div>",
    // Other language configurations removed for brevity
  };

  $rootScope.dtOptions = DTOptionsBuilder.fromSource()
    .withLanguage(language)
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withDataProp('data')
    .withOption('initComplete', function() {
       angular.element('.table input').attr('placeholder', 'search...');
    })
    .withPaginationType('full_numbers');

});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using ng-repeat in Angular.js, an additional td is created

https://jsfiddle.net/gdrkftwm/ https://i.sstatic.net/CTi2F.jpg I have encountered a problem while creating a table from a Json object. There seems to be an extra td being generated, and I'm not sure why. I want the structure of my table to resemble ...

javascriptangularjs

Using Angular and chartJS to generate a circular bar graph

I am looking to enhance my standard bar chart by creating rounded thin bars, similar to the image below: https://i.sstatic.net/uugJV.png While I have come across examples that suggest creating a new chart, I am unsure of how to implement this within the ...

javascriptangulartypescriptchart.js

Count of jSon objects

After receiving a string st from a web service, I convert it into an object. How can I determine the number of arrays inside this object? In this particular case, there are 2 arrays. var st = "{[{"Name": "fake", "Address": "add"]},[{"Name": "fake", "Addre ...

javascriptjson

Tips for executing forEach on a promise?

I am currently working with a function that returns a promise of an array: async function functionReturningPromiseOfUserIDs(): Promise<string[]> My question is, can I use the forEach method on the array returned by this function? async function runF ...

javascripttypescript

Is it possible to update the content of a page using only HTML and CSS, without the need for

Is it possible to update a page's content using only HTML and CSS without JavaScript? I came across this tutorial, but I'm not sure if updating the page on click without JavaScript is achievable. Check out this CodePen @keyframes hide1 { fro ...

javascriptjqueryhtmlcss

Implementing drag and drop functionality for dynamically generated components in Angular 7

I have a follow-up question based on my previous inquiry posted on Stack Overflow: Add directives to component selector when it is declared - Angular 7 My current scenario involves dynamically generating components upon clicking a button. These components ...

javascripthtmlangulardrag-and-dropangular-components

What is the best way to calculate the total of all files within a folder structure using JavaScript

Here is the array I'm working with: Array (7812) 0 {foldername: "", amount_of_files: 12, children: 86} 1 {foldername: "/pm", amount_of_files: 3, children: 7} 2 {foldername: "/pm/css", amount_of_files: 1, children: 0} 3 {f ...

javascriptarrays

Using @modelAttribute in an Ajax request in a Spring application

Currently, I am utilizing an ajax call to submit a form, but facing difficulties in accessing the parameter as a model attribute. Ext.Ajax.request({ url: 'url', headers: { 'Content-Type': 'applicati ...

javascriptajaxspringspring-mvcparameters

Leveraging Laravel Blade and Ajax for lightning-fast searching

Here is my jquery code When running the code, I encountered an issue where Laravel blade did not recognize the $results variable in the foreach statement. Despite the fact that I did not provide the form or route code, they function as expected. The main ...

javascriptjqueryajaxlaravellaravel-blade

Issues encountered when attempting to write content in Javascript into a PHP variable for utilization in an IF statement

Here is the code snippet: <script language="Javascript" src="http://gd.geobytes.com/gd?after=-1&variables=GeobytesCountry,GeobytesCity"> </script> <?php $City = '<script language="Javascript"> document.write(sGeobytesCity); & ...

phpjavascript

Updating default values in reactive() functions in Vue 3: A step-by-step guide

Currently, I am in the process of developing an application using Nuxt 3 and implementing the Composition API for handling async data. The specific scenario I am facing is this: I have a page that displays articles fetched from the database using useLazyFe ...

javascriptvue.jsnuxt.jsvuejs3nuxtjs3

Using MVC4 and jQuery to unselect items from an Html.CheckboxListFor

In my search page, I am utilizing jQuery to toggle the visibility of different sections based on user input. Specifically, I have a Html.Textbox and Html.CheckboxListFor that are shown or hidden depending on whether there is any input in the textbox or if ...

javascriptjqueryasp.net-mvc-4checkboxlist

Utilizing OpenLayers with JavaServer Faces (JSF) and the .xhtml extension

I created a JSF project and encountered an issue with running an example from . The example runs successfully as an HTML file, but when I try to run it as an XHTML file in my JSF project, it doesn't work. How can I make it run with JSF and .xhtml exte ...

javascripthtmljsf-2xhtmlopenlayers

Exploring AngularJS: Understanding ng-include and how it interacts with scopes

Why is it that I am unable to set the value of $scope.myProperty in the controller ExampleCtrl from an HTML file placed within ng-include? However, when I define $scope.myObj.myProperty and reference it in the HTML as ng-model="myObj.myProp", everything wo ...

angularjsangularjs-directiveangularjs-scope

How can one transfer information from a client to a server and complete a form using JavaScript?

Can the information be transferred from a client to the server using just JS, then fill out a form on the server, and finally redirect the client to view a pre-filled form? I am considering utilizing AJAX to send a JSON object, but unsure if it will be s ...

javascriptphphtmlajaxjson

What is the best way to pass a variable in a URL to ng-repeat?

Can ng-repeat be used with a variable in the URL? The format of my URL is: #/timeline/{{year}}/{{month}} <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li ng-repeat="months in dateMonths"><a href="#/timeline/{{month ...

arraysangularjsangularjs-ng-repeat

The useParams() function is returning undefined, even though the parameter does exist in the destination URL

I have a complete inventory of items called "Commandes" (PS: the app is in French), displayed in a table with a column for each row that should redirect me to another component showing more details about the selected row. To achieve this, I need to utilize ...

javascriptnode.jsreactjsmern

Transfer information from the server to the client using NodeJS and Express

I am encountering an issue with sending data from my express server to the client side. I have implemented app.post and app.get, however the problem is that the request needs to originate from the client side. My requirement is to send the data from the se ...

javascriptnode.jsexpressnpmnodejs-express-server

Symbol shortcut for changing to toString

When it comes to obtaining the numeric value of a variable like $event, typically I would use the following syntax: <ax-text-box (valueChange)='documentSearchItem.fromPrice=(+$event)'></ax-text-box> To achieve this, I simply add a +. ...

javascriptstringtypescriptvariablesnumeric

just half of the four $_POST variables are actually assigned

Here is a simple form structure: <table class='table table-striped table-bordered table-hover' id='dataTables-example'> <thead> <tr> <th>1</th> <th>2</th> ...

javascriptphphtml