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/

数据表列搜索框未显示

1 个答案: