CODEWITHSUNDEEP
javascriptjqueryinternationalizationdatatables
Matt
Matt

Reputation: 8942

Adding event listeners and internationalisation in DataTables

I have problem with internationalisation in DataTables.

After creating a table in DataTables I want to bind an change event listener to select tag (number of elements). I have no problem with that, but when I use language options in DataTables I can't bind an event listener.

jsfiddle

    <!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css" type="text/css" media="all" />
  <meta charset="utf-8">
  <title>ex</title>
</head>
<body>

<script type="text/javascript" >
    var tableId = 0;

var keywords = [["dog", 2],["table", 3],["chair", 4],["dog", 2],["table", 3],["chair", 4], ["dog", 2],["table", 3],["chair", 4],["dog", 2],["table", 3],["chair", 4],["dog", 2],["table", 3],["chair", 4]];

    function buildKeywordTableString(keywords){

      var dataSet = new Array();

      for (var i = 0; i < keywords.length; i++){
          dataSet.push([keywords[i][0],keywords[i][1]]);    
            }

            var table =  '<table id="table' + tableId + '" cellpadding="0" cellspacing="0" border="0" class="display"><thead><tr><th>K</th><th>F</th></tr></thead><tbody></tbody></table>';


            return table;
        };

    $("body").append(buildKeywordTableString(keywords));

    $('#table' + tableId).dataTable({
        language: {
                url: '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Catalan.json'           },
            "data": keywords,
            "bFilter":true,
            "paging": true,
            "bPaginate":true,
            "columns": [
                {"title": "Keywords"},
                {"title": "F", "width": "80px"}]
        });

        var selectElement = document.getElementsByName('table' + tableId.toString() + '_length')[0];    
        selectElement.addEventListener('change',function(){

            var tableIde = $(this).attr('name').replace('_length', "");
            var table = $("#" + tableIde).DataTable();
            table.page.len(this.options[this.selectedIndex].text).draw();

        });

        tableId++;

    $("body").append(buildKeywordTableString(keywords));
$('#table' + tableId).dataTable({
            "data": keywords,
            "bFilter":true,
            "paging": true,
            "bPaginate":true,
            "columns": [
                {"title": "Keywords"},
                {"title": "F", "width": "80px"}]
        });

        var selectElement = document.getElementsByName('table' + tableId.toString() + '_length')[0];    
        selectElement.addEventListener('change',function(){

            var tableIde = $(this).attr('name').replace('_length', "");
            var table = $("#" + tableIde).DataTable();
            table.page.len(this.options[this.selectedIndex].text).draw();

        });

    tableId++;

</script>

  <div id="details"></div>

</body>
</html>

If language option

language: { url: '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Catalan.json' },

is deleted, it works without problems, but i need internationalisation.

Upvotes: 0

Views: 1187

Answers (1)

mpiffault
mpiffault

Reputation: 429

from the Datatables language.url documentation:

Note that when this parameter is set, DataTables' initialisation will be asynchronous due to the Ajax data load. That is to say that the table will not be drawn until the Ajax request as completed. As such, any actions that require the table to have completed its initialisation should be placed into the initCompleteDT callback.

So the fact is that when you use the language.url, when you do

var selectElement = document.getElementsByName('table' + tableId.toString() + '_length')[0];

the table is not yet drawn and the dom elements does not exist.

So what you have to do here is to add to your settings object the "initComplete" attribute as a function which do what it has to do.

Upvotes: 1

Related Questions