Translate langauage option strings on button click

Translate langauage option strings on button click

AntrikshAntriksh Posts: 33Questions: 5Answers: 0
edited September 2020 in Free community support

Hi, I have a dataTable with language option as -
language: {
"search": "INPUT",
"paginate": {
"previous": '‹',
"next": '›'
},
"info": "TOTAL Results",
"lengthMenu": "Show MENU",
}

I want to translate the strings which are static. Like "Results", "Show" on some function call because i have three languages to be chosen from. Please if you can help. @kthorngren

Test ex - http://live.datatables.net/gajajipo/2/edit

Replies

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    You would need to re-initialise the table with the new language settings, as they can't be changed dynamically. You would either call destroy(), or use destroy when re-initialising,

    Colin

  • AntrikshAntriksh Posts: 33Questions: 5Answers: 0

    But i have a plug in feature for Jump to page number as a add on pagination. I wanted to have translation for that Jump to string.
    Feature -
    $.fn.dataTable.ext.feature.push( {
    fnInit: function ( settings ) {
    var select = new $.fn.dataTable.SelectPager( settings );
    return select.node();
    },
    cFeature: 'S'
    } );

    This code is in separate file though as a extension.

  • AntrikshAntriksh Posts: 33Questions: 5Answers: 0

    function selectPagination($) {
    $.fn.dataTable.SelectPager = function ( context ) {
    var tableId = context.nTable.id;

        // Build select input
        var nPaging = document.createElement('div');
        var nInput = document.createElement('select');
        var nPage = document.createElement('label');
        nPage.className = "paginate_page";
        if (tableId !== '') {
          nPaging.setAttribute('id', tableId + '_paginate1');
          nPaging.setAttribute('class', 'dataTables_paginate_listbox');
          nInput.setAttribute('class', 'custom-select custom-select-sm form-control form-control-sm');
        }
        //nInput.style.display = "inline-block";
        nPage.innerHTML = "Jump to: ";
        nPage.appendChild(nInput);
        nPaging.appendChild(nPage);
    
        $(nInput).change(function (_e) { // Set DataTables page property and redraw the grid on select change event.
          window.scroll(0,0); //scroll to top of page
          if (this.value === "" || this.value.match(/[^0-9]/)) { /* Nothing entered or non-numeric character */
            return;
          }
    
          // Extract table ID from select div.
          tableId = '#' + $(this).closest('div').prop('id').replace('_paginate1', '');
          var newPage = this.value * 1 - 1;  // First page is page 0.
          $(tableId).DataTable().page(newPage).draw(false);  // false to remain on page.
        }); /* Take the brutal approach to cancelling text selection */
        $('span', nPaging).bind('mousedown', function () {
          return false;
        });
        $('span', nPaging).bind('selectstart', function () {
          return false;
        });
    
        this.node = function () {
          return nPaging;
        };
    
      };
    
      $.fn.DataTable.SelectPager = $.fn.dataTable.SelectPager;
      $.fn.dataTable.ext.feature.push( {
        fnInit: function ( settings ) {
          var select = new $.fn.dataTable.SelectPager( settings );
          return select.node();
        },
        cFeature: 'S'
      } );
    

    }

    This is the code for Jump to pagination plugin.
    @colin

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Yep, so you could pop that feature off, and then add the new one with a push() with the necessary translation,

    Colin

  • AntrikshAntriksh Posts: 33Questions: 5Answers: 0

    Thanks colin. Also one small query. I have language.info = "TOTAL Results".

    But I want to have it conditional. Like if there is only on record in the dataTable it should be "TOTAL Result" otherwise Results.
    @colin

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    language.info is a fixed string, so that's not possible with the configuration. You could change the string in the element in a drawCallback, you'd have more control of it there.

    Colin

  • AntrikshAntriksh Posts: 33Questions: 5Answers: 0

    Ok, Like i used infoCallback function to customize it. But it overrides the infoFiltered string also. Do we have any similar function for infoFiltered also ?
    InfoCallback worked fine for INFO string.

    @colin
    And please can you give example, it will be a great help.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Again, that's a fixed string, so you'll need to do something in the callback - and you're right, infoCallback would be the place to do it, ignore what I said before :)

    Colin

  • AntrikshAntriksh Posts: 33Questions: 5Answers: 0

    Ok, yes infoCallback is working for INFO string. But this callback is overriding the INFOFILTERED string behavior which shows in case of filtering only.
    So any solution for this ?

    I can append string to infoCallback but it will not detect when filtering is done or not.
    @colin

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited September 2020

    See if Gyrocode's example code in this thread.

    Kevin

  • AntrikshAntriksh Posts: 33Questions: 5Answers: 0

    Thanks @kthorngren . It worked

This discussion has been closed.