Fixed Row Count
Fixed Row Count
sosensible
Posts: 1Questions: 0Answers: 0
I would like say 10 rows at all times if 10 rows is selected. If there are only 4 rows it would add 6 blank rows. If there were 43 rows and I was on the last page of records it would show 7 blank rows. Is this built in at this point? If not where can I put in a feature request?
This discussion has been closed.
Replies
It is not part of the API; however I had the exact same need as you. I believe there's a thread somewhere but it'll probably be shorter to just repost the information than track it down! I had to do it with jQuery in a callback. Here's the snipped portion of the dataTable() initialization:
[code]
"fnDrawCallback" : function(oSettings) {
var numcolumns = this.oApi._fnVisbleColumns(oSettings);
addRows(this, numcolumns, 10);
}
[/code]
The trick is that you can't just insert empty rows. They have to have at least one colspanned TD, but if you do column highlighting it's better to just add the right number of TDs as well.
In the above, I grab the number of visible columns, and then I pass my custom function 'this' object (the current table object, received by the function as 'obj'), along with the number of visible columns (received as numberColumns) and the number of target rows (in the above, 10 rows; received as targetRows).
Embarrassingly (but not so much that I'm going to stop myself) I am JUST noticing that I may not have finished refactoring my code! I don't have an environment to test, but I think the lastRow and lastRow.children lines near the top are obsolete and I forgot to delete them. In any event, this is working:
Here's the utility function:
[code]
var addRows = function(obj, numberColumns, targetRows) {
var tableRows = obj.find('tbody tr'), // data rows objects currently in the DOM
numberNeeded = targetRows - tableRows.length, // how many blank rows are needed to fill up to targetRows
lastRow = tableRows.last(), // cache the last data row
lastRowCells = lastRow.children('td'), // how many visible columns are there?
cellString,
highlightColumn,
rowClass;
// The first row to be added actually ends up being the last row of the table.
// Check to see if it should be odd or even. Expand logic if more than even/odd needed.
if (targetRows%2) {
rowClass= "odd";
} else {
rowClass = "even"; //
}
// We only sort on 1 column, so let's find it based on its classname
lastRowCells.each(function(index) {
if ($(this).hasClass('sorting_1')) {
highlightColumn = index;
}
});
/* Iterate through the number of blank rows needed, building a string that will
* be used for the HTML of each row. Another iterator inside creates the desired
* number of columns, adding the sorting class to the appropriate TD.
*/
for (i=0;i