DataTable-分页和筛选器don'不适用于JavaScript生成的表

DataTable - Pagination and Filter don't work for JavaScript generated table

本文关键字：JavaScript 适用于 不适用 分页 筛选 don DataTable-      更新时间：2023-09-26

我在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));

尝试先将表插入DOM，然后将其初始化为DataTable。你还需要确保表中也有一个有效的thead：

https://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);

将以下属性添加到表中：data-order='[[ 0, "desc" ]]'如果要按降序排列结果，则可以使用data-order='[[ 0, "aesc" ]]'，如果要按升序排列结果。

示例：

DataEntry.DataTable = $("#tblViewList").DataTable({
    "data": DataEntry.DataSet,
    "columns": [
        { "data" : "DomainName" },
        { "data" : "SystemName" },
        { "data" : "UserName" },
        { "data" : "Id-1" },
        { "data" : "Id-2" }
    ],
    order: [[ 0, "desc" ]],
    destroy: true
});
相关文章：