CODEWITHSUNDEEP
javascriptjqueryajaxdatatables
Barry Tormey
Barry Tormey

Reputation: 3126

Show empty rows jQuery dataTables

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.

Upvotes: 2

Views: 6212

Answers (4)

Johnny Peng
Johnny Peng

Reputation: 1

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.

Upvotes: 0

Tricky12
Tricky12

Reputation: 6822

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/

Upvotes: 0

Jakub Malec
Jakub Malec

Reputation: 146

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.

Upvotes: 1

Jon La Marr
Jon La Marr

Reputation: 1398

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.

Upvotes: 0

Related Questions