HTML javascript動態表大小調整

Question

我正在嘗試復制這個例子
http://www.datatables.net/release-datatables/examples/api/multi_filter.html

當有一個大表時，它將調整為10個條目的大小，並相應地分頁。 我什么都不需要了。 不需要搜索欄

目前，我從網站上獲取了JS腳本，但是在實現該功能時遇到了麻煩。 有人可以幫我嗎。 我有一個像這樣的表，其中<table id="example" class="display" cellspacing="0" width="100%">帶有thead並帶有此JavaScript代碼

    <script type="text/javascript" class="init">

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

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );

    </script>

目前，它沒有調整表的大小。 這可能是一個非常基本的實現，但我似乎無法使其正常工作。 請幫忙。

Answer 1

在HTML中添加CSS

tfoot input {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

它解決了您的問題嗎？

結果： https : //jsfiddle.net/cmedina/7kfmyw6x/20/