jquery dataTable分页没有出现

Seb*_*ger 2 javascript jquery grails pagination datatables

我正在使用 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>
Run Code Online (Sandbox Code Playgroud)

我的testdata涵盖了30个数据行并且工作正常(过滤,清除过滤器等等)唯一的问题是,分页不会显示.

分页问题的屏幕截图

正如你看到的:

  • 分页在后台工作(showing 1-1 of 30)
  • 第一个文本出现,虽然不是可以解决的(如目前在第一页)

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

有任何想法吗?底层grails应用程序的问题?

小插件问题/信息:如果我bSort: false完全删除分页符,并在一个页面上列出所有项目(1到30).

Tec*_*tor 6

对于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" }]
    });
Run Code Online (Sandbox Code Playgroud)

数据表


Seb*_*ger 6

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

解决方案:

<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Run Code Online (Sandbox Code Playgroud)