jquery dataTable分页没有出现

Question

我正在一个 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）。

Answer 1

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

因此解决方案：

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

Answer 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" }]
    });