I'm using the jQuery DataTables plug-in. I am wondering if there is a way to add empty rows to the table so that the table always displays say 50 rows, weather there is data in those rows or not?
For example, if I make an AJAX call and it returns 5 entries, I want to be able to display 45 empty rows. Or if the call returns 49 entries, I want to still display 1 empty row at the bottom of the table.
After you populate your data source with results from the ajax call, you could count amount of elements in the source, and if it's less than 50, you could add to it some empty records.
Edit: on second thought it might not be the best idea, because it'll screw up the sorting.
Hard to know without code snippets and what you're doing, but you could either modify it on the server or client side.
You could force the call to return 50 rows on the server, regardless of how many are populated or you could receive the response and then modify it on the client side.
Someone may have a better solution, but this should "work" assuming you have at least 1 entry.
for (var i=numEntries; i < 50; i++) {
$("#tableID tr:last").after('<tr><td>Empty Row</td></tr>');
}
JSFiddle: http://jsfiddle.net/yXvmX/2/
I found a callback function named "drawCallback" can be used in this kind of case. https://datatables.net/reference/option/drawCallback every time dataTable redraw one table page content like you do sorting, it will be called.
$("#yourTable").DataTable({
"columns":columns,
"ajax": {
"url": url
"dataSrc" : function (json) { return json;}
},
"searching": false ,
"pageLength": rowNumPerPage,
"lengthChange": false,
"autoWidth": false,
"order": [[ 0, "asc" ]],
"drawCallback": function( settings ) {
//for maintaining the same height every page,
//add empty row to table
var api = this.api();
var currentPageDataSet = api.rows( {page:'current'} ).data() ;
if(currentPageDataSet.length < rowNumPerPage){
var $tbody = $('#yourTable tbody');
for(var i = 0; i< rowNumPerPage-currentPageDataSet.length; i++){
var isEven = (currentPageDataSet.length+(i+1))%2 === 0;
var $tr = (isEven)? $('<tr role="row" class="even"></tr>') : $('<tr role="row" class="odd"></tr>');
for(var j=0; j< columns.length; j++){
$tr.append('<td style="color:white;" >_</td>');
}
$tbody.append($tr);
}
}
}
});
In this callback function, what I do is to count the row number of current page data, if the row number is smaller than the max page row number, then we append empty row elements to tbody.
