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列搜索框不顯示

回答

相關問題