Scroller only renders first records from ajax source when cells are padded.
Scroller only renders first records from ajax source when cells are padded.
factorial
Posts: 12Questions: 3Answers: 1
I've been struggling with this strange problem for about a week now and finally have it down to a very simple test case.
Here is my test data, 140 records total. To run this test case, put that data at /scrollerbug.json, remove the \ from the style rule in the page pasted below (this forum changes #inbox into a link even though its in a code block), load that page, scroll down to "id61" and refresh.
If the cells are padded via the CSS rule in the <head>, only the first half (or so) of the records are loaded and the rest of the content is blank when you scroll. Take away that CSS rule and the records load as expected.
How can I add padding to cells without breaking ajax rendering of contents with Scroller?
<!DOCTYPE html>
<head>
<!--
1. put the test data at /scrollerbug.json
2. load this page
3. scroll down until the row for "id61" is visible
4. refresh and scroll down.
Records after id61 are not loaded until you scroll up a bit past id61.
REMOVE THE SINGLE STYLE RULE BELOW AND THIS BUG GOES AWAY.
-->
<style>
\#inbox td {
padding: 10px 30px 10px 30px;
}
</style>
<link rel="stylesheet" href="http://cdn.datatables.net/scroller/1.2.2/css/dataTables.scroller.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js" ></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.js" ></script>
<script type="text/javascript" src='http://cdn.datatables.net/scroller/1.2.2/js/dataTables.scroller.js'></script>
<script type="text/javascript">
function getInbox() {
var inboxListSelector = '#inbox';
inboxListInitOptions = {
"aoColumnDefs": [ // define column data and titles
{ "aTargets": [0], "sTitle": "ID" },
{ "aTargets": [1], "sTitle": "Type", "bVisible": true },
{ "aTargets": [2], "sTitle": "Description" },
{ "aTargets": [3], "sTitle": "Property", "bVisible": false },
{ "aTargets": [4], "sTitle": "Company" },
{ "aTargets": [5], "sTitle": "Action" },
{ "aTargets": [6], "sTitle": "Submit" },
{ "aTargets": [7], "sTitle": "VC" },
{ "aTargets": [8], "sTitle": "AC" },
{ "aTargets": [9], "sTitle": "Ver" }
],
"retrieve": true,
"dom": "frtiS",
"scrollY": 400,
"stateSave": true,
"scroller": {
"loadingIndicator": false
}
};
return $(inboxListSelector).DataTable(inboxListInitOptions);
}
function updateInbox() {
var ajaxUrl = "/scrollerbug.json";
var inbox = getInbox();
inbox.ajax.url(ajaxUrl).load();
}
$(document).ready(function() {
updateInbox();
});
</script>
</head>
<body>
<table id="inbox"></table>
</body>
</html>
Notes:
- I need
updateInbox()so I can change the ajax URL programatically, though that's not illustrated here. - I also do need state saving and the columnDefs.
This discussion has been closed.
Answers
It looks like the
scroller.rowHeightproperty might be appropriate here. Still working on this but I think that's the trick.The official example on this site illustrates this bug:
Result:
Only Alea Burris and Alea Delaney are displayed. The rest of the rows pop in when you scroll about 3 rows up or down.
I'm going to open a new discussion on this since it's a discovered bug and probably not going to get any attention here.