CODEWITHSUNDEEP
jquerydatatablesdatatables-1.10
αƞjiβ
αƞjiβ

Reputation: 3246

DataTables pagination plugin for input not working

I am trying to use input plugin of DataTables for the pagination. I have all three jar files loaded - jQuery1.11.1, dataTables1.10 and input.js. But still I am getting

TypeError: $.fn.dataTableExt is undefined

and 

TypeError: plugin is undefined

errors.

Do I have to include any other jar? In some old post I saw plugin.jar being loaded but in DataTables plugin page itself there is no mention of this JAR.

DataTables Initialization code

var table = $jq11('#openCasesTable').dataTable({
    "ajax": someUrl,
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [0, 6, 7] }
    ],
    "columns": [
        { 
            "data": null,
            "render": function(data, type, row, meta) {
                ...
            }
        },
        ...
    ],
    "deferRender": true,
    "dom": 'l<"#removeButtonDiv.removeButton">rtip',
    "filter": false,
    "initComplete": function(settings, json) {
        $('#removeButtonDiv').html('<input id="removeButton" type="button" value="Remove"  style="float:right; height: 25px;" disabled />');
    },
    "lengthMenu": [ [20, 40, 60, 80, 100], [20, 40, 60, 80, 100] ],
    "language": {
        "emptyTable": "No data to list",
        "infoFiltered": " "
    },
    "order": [[4, "desc"]],
    "processing": true,
    "drawCallback": function( settings ) {
        $.each(selected, function(index, value){
            $('#'+value).attr("checked", "checked");
        });
    },
    "serverSide": true,
    "sPaginationType": "input"
});

Upvotes: 0

Views: 3825

Answers (3)

babar aslam
babar aslam

Reputation: 9

  table.on('draw.dt', function () {
    // Create a new li element
    var newLi = $('<li></li>');

    // currentPage
    var currentPage = table.page.info().page;
    currentPage = currentPage + 1;

    // Create an input element
    var inputText = $('<input type="text" value="'+currentPage+'" id="page-number"  class="form-control-cv" placeholder="Enter Page Number"/>');

    // Append the input element to the new li
    newLi.append(inputText);

    // Prepend the new li to the ul
    $('ul.pagination').prepend(newLi);
});



$(document).on('keyup', '#page-number', function(){

    var number = $(this).val();
    var pageNumber = parseInt(number, 10);
    if (pageNumber >= 1 && pageNumber <= table.page.info().pages) {
        table.page(pageNumber - 1).draw(false);
    }
    var number = $(this).val();
    var currentPage = table.page.info().page;
    console.log("Active page:", currentPage);

})

Upvotes: 0

Krutik Jayswal
Krutik Jayswal

Reputation: 3175

HTML FILE

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
 </tbody>
</table>

JAVASCRIPT FILE

$(document).ready(function() {
    $('#example').DataTable();
} );

Include below css as well for formatting

../../media/css/jquery.dataTables.css

All the things , sample and exmaple are there in below.you can download it.

http://www.datatables.net/download/download

Pagination with working with above things.If you still face issue can you please add file from above link and try it again.

Upvotes: -1

CarsomyrJ
CarsomyrJ

Reputation: 44

From dataTable 1.10, they changed pagination structure. Now they use "paging" (Boolean), "pagingType" (String) properties, and it seems they changed the pagination plugin structure also. As a result, every pagination plugin would be not working on 1.10. You may use dataTable 1.9.

New pagination options : http://datatables.net/reference/option/pagingType

Pagination plugin page under construction : http://datatables.net/manual/plug-ins/paging

They provide full, simple, full_numbers, and simple_numbers as default options. If you want to use input pagination, you can download dataTable 1.9 in their github or try to make own backward compatibility logic like they provided in upgrade section.

$(document).ready(function() {
    $('#example').dataTable( {
      "pagingType": "full_numbers"
    } );
} );

Upvotes: 1

Related Questions