jquery dataTable pagination not appearing

Question

i am working with http://datatables.net/ within a grails application this is my initialization code:

<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>

my testdata covers 30 data rows and works just fine (filtering, clearing filters, etc...) the only issue is, that the pagination will not show up.

as you see:

• pagination is working in the background (showing 1-1 of 30)
• First text is appearing, although not clickeable (as currently on first page)

i have tried a lot of different pagingType, bPaginate, bSort,... things but nothing seems to work.

Any ideas? issues with the underlying grails application?

Small addon issue/information: if i remove bSort: false the pagination breaks completely and all projects are listed (1 through 30) on one page.

Solution 1

I found the solution - a mixup of two different jquery versions one included automatically by aui (atlassian user interface) and another manually by me. the wrong one was chosen in the end and led to missing pagination.

solution therefore:

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

Solution 2

For javascript, i've use only sPaginationType to initialize the data table.
I'm always use this code for data table. Let build the data table step by step. Use this code only, then check whether it's working or not.

Note: Please remove all other javascript files other than data table js and css files. I got a issue that data table is not working with jquery calender. Let try this and let me know.

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

Comments

[Sebastian Flückiger]

sadly this does not work. it breaks the table completely. all results will be shown in one list of 30 without pagination at all. additionally it will remove the columfilters :)

[Rakesh Patil]

Use below js to work with this <script type="text/javascript" charset="utf8" src="ajax.aspnetcdn.com/ajax/jQuery/…> <script type="text/javascript" charset="utf8" src="ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/…>