HTML JavaScript 动态表大小调整

HTML javascript dynamic table resizing

本文关键字：调整 JavaScript 动态 HTML      更新时间：2023-09-26

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

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

目前我从网站上获得了JS脚本，但是在实现时遇到了问题。有人可以帮我吗？我有一个像这样<table id="example" class="display" cellspacing="0" width="100%">的表格，带有带有 JavaScript 代码的 thead 和 tfoot

    <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>

现在它没有调整表格的大小。这可能是一个非常基本的实现，但我似乎无法让它工作。请帮忙。

在 HTML 中添加 CSS

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

它解决了你的问题？

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

相关文章：