Pagination is disabled and no iDisplayLength Drop Down List
Pagination is disabled and no iDisplayLength Drop Down List
37Stars
Posts: 3Questions: 0Answers: 0
I have used DataTables on a number of projects, but on the latest project I am using server side processing for the first time. When the page is served the table is empty, except for THEAD containing the header info. On page load it successfully makes a call to the server and gets the first 25 of 256 records. The data is displayed correctly in the table.
In the header the div (DataTables_Table_0_length) containing the drop down list for iDisplayLength is hidden.
In the footer I get the text "Showing 1 to 25 of 25 entries (filtered from 256 total entries)". I also see the pagination, "[First] [Previous] [1] [Next] [Last]". However, all of the anchor tags in the div (DataTables_Table_0_paginate) are set to disabled.
It seems as if some method isn't being called after the data comes back from the server. Below is my initialization of the dataTable.
$(function() {
$('.data-table').dataTable({
'bJQueryUI': true,
'bProcessing': true,
'bServerSide': true,
'iDisplayLength': 25,
'sPaginationType': 'full_numbers',
'sAjaxSource': '@Url.Action("JsonRegistrationList", "Registration")', // Creates => /Registration/JsonRegistrationList
'sServerMethod': 'POST',
'fnDrawCallback': function() {
$('.edit-button').button({
icons: { primary: "ui-icon-pencil" },
text: false
});
},
'aoColumns': [
{
'sName': 'id',
'bSearchable': false,
'bSortable': false,
'fnRender': function(obj) {
return 'Edit';
}
},
{ 'sName': 'Name' }
]
});
I see the Json data coming back from the server and it contains sEcho, iTotalRecords, iTotalDisplayRecords, and aaData.
Any ideas?
Thanks
In the header the div (DataTables_Table_0_length) containing the drop down list for iDisplayLength is hidden.
In the footer I get the text "Showing 1 to 25 of 25 entries (filtered from 256 total entries)". I also see the pagination, "[First] [Previous] [1] [Next] [Last]". However, all of the anchor tags in the div (DataTables_Table_0_paginate) are set to disabled.
It seems as if some method isn't being called after the data comes back from the server. Below is my initialization of the dataTable.
$(function() {
$('.data-table').dataTable({
'bJQueryUI': true,
'bProcessing': true,
'bServerSide': true,
'iDisplayLength': 25,
'sPaginationType': 'full_numbers',
'sAjaxSource': '@Url.Action("JsonRegistrationList", "Registration")', // Creates => /Registration/JsonRegistrationList
'sServerMethod': 'POST',
'fnDrawCallback': function() {
$('.edit-button').button({
icons: { primary: "ui-icon-pencil" },
text: false
});
},
'aoColumns': [
{
'sName': 'id',
'bSearchable': false,
'bSortable': false,
'fnRender': function(obj) {
return 'Edit';
}
},
{ 'sName': 'Name' }
]
});
I see the Json data coming back from the server and it contains sEcho, iTotalRecords, iTotalDisplayRecords, and aaData.
Any ideas?
Thanks
This discussion has been closed.
Replies
.dataTables_length
{
display:none;
}
Allan
sEcho: "1"
iTotalRecords: 256
iTotalDisplayRecords: 10