javascript - HTML javascript 动态调整表格大小

Question

我正在尝试复制这个示例
http://www.datatables.net/release-datatables/examples/api/multi_filter.html

当表很大时，它会将大小调整为 10 个条目并相应地对它们进行分页。我不需要任何其他东西。不需要搜索栏

目前，我从网站上获取了 JS 脚本，但在实现此脚本时遇到了困难。有人可以帮我吗？我有一张像这样的 table <table id="example" class="display" cellspacing="0" width="100%">带有 thead 和 tfoot 以及此 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/