DataTable - 分页和过滤器不适用于JavaScript生成的表

时间:2014-11-05 15:21:11

标签: javascript jquery datatables jquery-datatables

我在DataTables中有JavaScript生成的表格,但分页和过滤器不显示(工作)。当我尝试使用 bFilter bPaginate 时,它并没有帮助我。

jsfiddle

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 cellpadding="0" cellspacing="0" border="0" class="display"></table>')
            .dataTable({
                "data": dataSet,
                "bFilter":true,
                "paging": true,
                "bPaginate":true,
                "columns": [
                    {"title": "Keyword"},
                    {"title": "F"}
                ]
            })[0].outerHTML;

            return table;
        }

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

1 个答案:

答案 0 :(得分:1)

首先尝试将表插入DOM,然后将其初始化为DataTable。您还要确保表中也有一个有效的thead:

http://jsfiddle.net/u7yhx9fL/10/

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]];
var id=0;

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' + id + '" cellpadding="0" cellspacing="0" border="0" class="display"><thead><tr><th>Keyword</th><th>F</th></tr></thead><tbody></tbody></table>';
    $('body').append(table);
    $('#table' + id).dataTable({
        "data": dataSet,
        "bFilter":true,
        "paging": true,
        "bPaginate":true
    });

    id++
}

buildKeywordTableString(keywords);
buildKeywordTableString(keywords);