数据表列搜索框未显示答案

【问题标题】：datatables column search boxes not showing数据表列搜索框未显示
【发布时间】：2016-09-15 23:05:27
【问题描述】：

使用的数据表是 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();
                    }
                });
            });
    });
});

我还希望将这些搜索框放在标题下，作为表格的第一行....

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

【问题讨论】：

标签： jquery datatable datatables datatables-1.10

【解决方案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/

【讨论】：

感谢您的查找，这与我的情况之间存在重大差异。在我的 HTML 代码中没有预先存在的表。表是使用 JSON 数据动态构建的。我已经在“生成表格之前”、“fnInitComplete 例程”以及表格生成（绘制）之后尝试了该代码。它不起作用。
您的意思是您的table 标签本身是动态生成的，还是您的数据是动态生成的并且您将其分配给表？
如果你能创建JSFiddle你的问题，这将有助于解决问题。
抱歉不知道如何创建小提琴。但我找到了一个几乎可行的解决方案： 1. 使用 javascript 将表格行添加到 ID。 2：在DataTable代码中包含搜索代码。它现在可以工作了，但是现在 tbale 列的宽度是固定的，并且其中的数据会环绕....
$("#item").append(' '); // 对应该匹配表中的列数。