jquery dataTable分页没有出现

Posted 2023-05-07

【中文标题】jquery dataTable分页没有出现

【英文标题】：jquery dataTable pagination not appearing

【发布时间】：2014-10-01 17:52:43

【问题描述】：

我正在一个 grails 应用程序中使用 http://datatables.net/ 这是我的初始化代码：

<g:javascript>
    $(document).ready(function () 
       var oTable = $('#projectTable').dataTable(
            "bSort": false,
            "sPaginationType": "full_numbers"
        );

        oTable.columnFilter(
            sPlaceHolder: "head:before",
            aoColumns: [
                 sSelector: "#projectIdFilter" ,
                 sSelector: "#projectNameFilter" ,
                 sSelector: "#projectStatusFilter", type: "select" ,
                 sSelector: "#projectModifiedFilter",
                 sSelector: "#projectActionablesFilter" 
            ]
        );
    );

    function resetFilters() 
        var oTable = $('#projectTable').dataTable();
        var oSettings = oTable.fnSettings();
        for(iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) 
            oSettings.aoPreSearchCols[iCol].sSearch = '';
        
        oTable.fnDraw();
        $('#filter_Name').val('');
        $('#filter_Project_ID').val('');
        $('#filter_Modified').val('');
        $('#filter_Status').val('Status');
        $('#filter_Actionables').val('');
    

</g:javascript>

我的 testdata 涵盖 30 个数据行并且工作正常（过滤、清除过滤器等），唯一的问题是分页不会显示。

如你所见：

分页正在后台运行 (showing 1-1 of 30) 出现第一个文本，但不可点击（目前在第一页上）

我已经尝试了很多不同的 pagingType、bPaginate、bSort ......但似乎没有任何效果。

有什么想法吗？底层 grails 应用程序有问题？

小插件问题/信息：如果我删除 bSort: false，分页将完全中断，并且所有项目都在一页上列出（1 到 30）。

【参考方案1】：

我找到了解决方案——混合了两种不同的 jquery 版本，一个由 aui（atlassian 用户界面）自动包含，另一个由我手动包含。最后选错了，导致错页。

因此解决方案：

<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

【参考方案2】：

对于 javascript，我只使用 sPaginationType 来初始化数据表。 我总是将此代码用于数据表。让我们一步一步构建数据表。仅使用此代码，然后检查它是否有效。

注意：请删除除数据表js和css文件之外的所有其他javascript文件。我遇到了一个问题，即数据表不适用于 jquery 日历。试试这个，让我知道。

    $('#table_name').dataTable(
      "sPaginationType": "full_numbers"
      )
    .columnFilter(sPlaceHolder: "head:before",
      aoColumns: [type: "text" ,type: "text" ,type: "text" ,type: "text" ,type: "text" ,type: "text" ]
    );

【讨论】：

很遗憾这不起作用。它完全打破了桌子。所有结果都将显示在一个 30 个列表中，根本没有分页。另外它会删除columfilters :)

使用下面的 js 来处理这个