数据表分页不显示

如何解决数据表分页不显示

我要做的就是像这样设置一个表： https://datatables.net/examples/basic_init/alt_pagination.html

复制了代码，但没有成功。我已经尝试了许多不同的变量，并删除了所有必需的代码，然后删除了所有代码，但问题可能出在我的头上。

我也经历了其他一些类似的SOF问题，可能是某些提到的“ sDom”，所以我尝试了一些我在网上找到的变体，但还没有碰到。

当前的JS小提琴尝试： https://jsfiddle.net/nf50j3cm/#&togetherjs=FjamrJizOe

table.html

npx jest --clearCache

解决方法

您可能已经尝试了其中的一些或全部，但是以下一些想法可能会有所帮助：

确保您没有使用legacy版数据表中的任何配置。您正在使用1.10+-请确保使用正确的v1.10配置。
首先使它无需任何Django标签即可工作-只是一个独立的页面。然后分阶段集成标签，以便您检查它是否仍然有效。
您可以从this example开始-先使它工作，然后根据需要添加正确的选项。
确保您花一些时间阅读文档-数据表文档确实非常好，并且花一点时间阅读和理解它从长远来看将节省大量时间。

此外，请尝试在HTML中声明您的css / js导入。

要开始-只需删除所有选项并使用默认值即可：

    $('#example').DataTable( {

    } );

一旦运行，请确保一次添加一个正确的选项。

尝试一下：

<script>
  // Call the dataTables jQuery plugin
  $(document).ready(function() {
    $('#mainTable').DataTable({
      dom: 'Bfrtip',buttons: [
            'excel','pdf'
        ]
    });
  });
</script>

我在网上找到了一个可以复制的示例，该示例终于奏效了。这是显示示例的YT video，并有github repo复制代码。

下面是github存储库中的代码，对我来说，关键部分是将js代码包装在子模板中，然后通过base.html中的同一块再次调用该代码。

我花了很长时间才弄清楚，因为我不知道脚本没有被调用。随时在下面留言，让我知道确定是否正在调用库脚本的最佳方法。

{% block js %}

{% endblock js %}

，然后在其中调用

base.html

...

<footer>
      <p><h6> This site is brought to you by Python,Django and the YogiCoder</h6></p>
 <h6> <p>Contact information: <a href="mailto:imtheyogicoder@gmail.com">imtheyogicoder@gmail.com</a></p></h6>

</footer>
      </div>

{% block js %}

{% endblock js %}



</body>
</html>

child.html

 ....

 {% block js %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.2/b-flash-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fh-3.1.4/r-2.2.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.2/b-flash-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fh-3.1.4/r-2.2.2/datatables.min.js"></script>
<script>
    $(document).ready( function () {
    $('#table_id').DataTable({

    dom: 'B<"clear">lfrtip',buttons: {
        name: 'primary',buttons: [ 'copy','csv','excel','pdf' ]

        }}
    );
} );
</script>
</div>
{% endblock %}