Question

我在DataTables中遇到国际化问题。

在DataTables中创建表格后，我想将更改事件监听器绑定到选择标记（元素数量）。我没有问题，但是当我在DataTables中使用语言选项时，我无法绑定事件监听器。

    <!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' },

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

Answer 1

来自数据表language.url documentation：

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

事实是，当你使用language.url时，当你做

时

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

尚未绘制表格且dom元素不存在。

所以你要做的就是将“initComplete”属性作为一个函数添加到你的设置对象中，它可以完成它必须做的事情。

在DataTables中添加事件侦听器和国际化

1 个答案: