столбцы поиска столбцов столбцов не показаны

Question

Используемый тип данных - 1.10.12

Я бы предположил, что нижеследующий для работы, но это не так. Я имею в виду, что все остальное работает, кроме полей поиска, они не отображаются. Данные 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(); 
        } 
       }); 
      }); 
    }); 
}); 

Я также хочу, чтобы эти окна поиска под заголовками, в первой строке таблицы ....

этот код исходит от сайта, почему он не работает?

Answer 1

Вы пропускаете создание окон поиска в коде

Пожалуйста, добавьте следующие строки перед инициализацией DataTable (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/