javascript - 在DataTables中添加事件监听器和国际化

我对DataTables中的国际化有疑问。

在DataTables中创建表后，我想绑定一个更改事件侦听器以选择标签（元素数）。我对此没有任何问题，但是当我在DataTables中使用语言选项时，我无法绑定事件监听器。

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>

如果语言选项

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

被删除，它没有问题，但我需要国际化。

最佳答案

从数据表language.url documentation中：

  请注意，设置此参数后，DataTables的初始化将
  由于Ajax数据加载而变得异步。那就是说
  在Ajax请求完成之前，不会绘制表格。因此，
  需要该表完成其操作的任何操作
  初始化应该放在initCompleteDT回调中。

所以事实是，当您使用language.url时，

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

该表尚未绘制，并且dom元素不存在。

因此，您要做的就是将“ initComplete”属性作为函数添加到设置对象中，该函数可以执行其必须执行的操作。

关于javascript - 在DataTables中添加事件监听器和国际化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27446947/