HTML javascript 动态表格调整大小答案

【问题标题】：HTML javascript dynamic table resizingHTML javascript 动态表格调整大小
【发布时间】：2016-07-05 09:01:51
【问题描述】：

我正在尝试复制此示例
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 编码，我不能在这里发布它，因为它有很多编码（表格中有很多行）...拿我提供的网站上的示例..我将该源代码放在我自己的 HTML 文件中，它似乎没有调整表格大小<table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot>
如果我们没有看到您的代码，我们很难给您任何建议。可能是css、脚本包含或脚本版本等问题...我只是将代码复制粘贴到jsfiddle，它可以工作jsfiddle.net/mwwp9b7m
@Yuri 我可能把 JS 脚本放在了错误的地方......他们应该在表格的底部作为<script language="javascript" type="text/javascript"> 并用</script> 关闭它或他们应该放在一个单独的文件中并引用它吗？
我通常把

标签： javascript jquery html datatables html-table

【解决方案1】：

在 HTML 中添加 CSS

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

它解决了你的问题？

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

【讨论】：

抱歉无知的问题，你知道 javascript .. 我应该把它放在表格的底部还是应该创建一个新的 .js 文件并在头节点中使用 <script type="text/javascript" language="javascript" src="dataTable.js"></script> 链接它。对不起，不是 html 编码专家
@civic.sir 没问题