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个数据行并且工作正常（过滤，清除过滤器等等）唯一的问题是，分页不会显示。

Screenshot of pagination issue

如你所见：

分页正在后台工作（showing 1-1 of 30）
第一个文字正在出现，虽然不是陈词滥调（目前在第一页上）

我尝试了很多不同的pagingType，bPaginate，bSort，...但事情似乎没什么用。

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

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

Answer 1

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

datatable

Answer 2

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

因此，

解决方案：

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

jquery dataTable分页没有出现

2 个答案: