datatables列搜索框不显示

使用的数据表是版本1.10.12datatables列搜索框不显示

我会假设以下工作，但它不。我的意思是除了搜索字段以外的所有其他工作，他们不显示。从服务器获取JSON数据以绘制表格。

这里是HTML：

<span> 
    <table name="item" id="item" class="display" width="100%" cellspacing="0"> 
    </table> 
</span>

的javascript：

$(document).ready(function(){ 
    //################# initial table draw 
    var oTable;  //global 
    var rowIndexGlobal = 0; 
    var colIndexGlobal = 0; 

    $.getJSON("item.pl?Action=getlist", function(data) { 
     var dataSet = []; 
     $.each(data, function(key, val) { 
     dataSet.push(val); 
     }); 

     oTable = $('#item').DataTable({ 
      data: dataSet,   
      columns: [ 
       { title: "ID" }, 
       { title: "Item" }, 
       { title: "Inventory" }, 
       { title: "Price" }, 
       { title: "Sale" }, 
      ], 
      "fnInitComplete": function() { 
       $('#item tbody tr').each(function(){ 
         $(this).find('td:eq(3)').attr('nowrap', 'nowrap');  //making text to NOT-wrap. 
       }); 
       $("#datatables4_wrapper").css("width","100%"); 
       //this did not work so i have commented out 
       /*var r = $('#item tfoot tr'); 
       r.find('th').each(function(){ 
        $(this).css('padding', 8); 
       }); 
       $('#item thead').append(r); 
       $('#search_0').css('text-align', 'center');*/ 
      }, 
      "bAutoWidth": false 
     }); 
     // Sort by columns 1 and 9 and redraw <- it works, but search does not.... 
     oTable 
      .order([ 1, 'asc' ], [ 9, 'asc' ]) 
      .draw() 
      .columns().every(function() { 
       var that = this; 
       $('input', this.footer()).on('keyup change', function() { 
        if (that.search() !== this.value) { 
         that 
          .search(this.value) 
          .draw(); 
        } 
       }); 
      }); 
    }); 
});

我也希望有下头部这些搜索框，作为表的第一行....

这段代码来自网站，为什么它不起作用？

来源

2016-09-15 rajeev

你缺少的搜索框建立在你的代码

请如果你想在标题下的搜索框，只需添加初始化数据表（oTable = $('#item').DataTable({..）

// Setup - add a text input to each footer cell 
$('#item tfoot th').each(function() { 
    var title = $(this).text(); 
    $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
});

前添加以下行下面CSS

tfoot { 
    display: table-header-group; 
}

演示：https://jsfiddle.net/Prakash_Thete/ehhfsrfq/

来源

2016-09-16 06:07:07

Thx看起来，这和我的情况有很大的区别。在我的HTML代码中没有预先存在的表。表建立在JSON数据的基础上。我已经在“生成表之前”，“fnInitComplete例程”以及表生成（绘制）之后尝试过该代码。这是行不通的。 – rajeev

你的意思是你的'table'标签本身是动态生成的，还是你的数据是动态生成的，而你正在将它分配给表？ –

如果你可以为你的问题创建'JSFiddle'，这将有助于解决这个问题。 –

datatables列搜索框不显示

回答

相关问题