Mystery "0" in the background

wolfgt

I have a number zero "0" show up when the datatable is initially loading and then if I have table-striped enabled, you can see the "0" in the background of the completed table. Images of it during initial load and in the background are included below. My datatable initialization code is:

var dataTable = $('#list-table').DataTable( {
            "processing": true,
            "language": {
                 "processing": "Loading . . ."
              },
            "serverSide": true,
            ordering: true,
            searching: true,
            "pageLength": 25,
            "lengthChange": false,
            "deferRender": true,
            "dom": '<"top">rt',
            orderCellsTop: true,
            //"bDestroy": true,
            info: false,
            
            "ajax":{
                url :"<?=base_url()?>admin/candidate/candidate_list", // json datasource
                type: "post",  // method  , by default get
                'data': function(data){
                    // Read values
                    var name = $('#searchByName').val();
                    // Append to data
                    data.searchByName = name;
                },
                error: function(){  // error handling
                    $("#list-table").append('<tbody class="list-table-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                },
            },
            scrollX: true,
            scrollY: '600px',
            scrollCollapse: true,
            scroller: {
                loadingIndicator: false,
                displayBuffer: 50,
                boundaryScale: 1,
                serverWait: 750,
                rowHeight: 25
            },
            
            initComplete: function(settings, json){
                $('div.dataTables_scrollBody').css('min-height', 0); 
                if(json['recordsTotal']==json['recordsFiltered'])
                {
                    // This is a list of all records. Just show the total.
                    document.getElementById("totalsfilter").innerHTML = '';
                    document.getElementById("totalsof").innerHTML = '';
                    document.getElementById("totals").innerHTML = json['recordsTotal'];
                }else
                {
                    // This is a filtered list of the records. Show the filtered and total numbers.
                    document.getElementById("totalsfilter").innerHTML = json['recordsFiltered'];
                    document.getElementById("totalsof").innerHTML = ' of ';
                    document.getElementById("totals").innerHTML = json['recordsTotal'];
                }
            }
        });

kthorngren

I would say that is something in your HRML document and not Datatables. You can temporarily remove the Datatable init code to see if the 0 is still there.

Kevin

wolfgt

kthorngren, I am assuming you meant HTML (unless I am missing something). The HTML code for the table is very basic:

<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body"><br>
            <?php include('inc/message.php'); ?>
            <div class="alert alert-success success" style="display:none;">
                <strong>Success !</strong> You have succesfully deleted this Candidate
            </div>
            <div class="alert alert-danger danger" style="display:none;">
                <strong>Error !</strong> Unable to delete
            </div>
            <div class="alert alert-success success1" style="display:none;">
                <strong>Success !</strong> Status Updated Successfully
            </div>
            <div class="alert alert-success success11" style="display:none;">
                <strong>Success !</strong> Status Updated Successfully
            </div>
            <div class="alert alert-danger danger11" style="display:none;">
                <strong>Error !</strong> Unable to Update Status
            </div>
            <section id="configuration">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">
                                    Candidates (<span id="totalsfilter" class="totalsfilter"></span><span id="totalsof" class="totalsof"></span><span id="totals" class="totals"> Loading <i class="fa fa-spinner fa-pulse fa-lg fa-fw"></i></span>)
                                </h4>
                            </div>
                            <div class="card-body card-dashboard">
                                <div class="table-responsive">
                                    <!-- table class -->
                                    <table id="list-table" class="table-striped table-bordered table-hover" height="100%" width="100%"  style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Title</th>
                                                <th>Status</th>
                                            </tr>
                                            <tr>
                                                <th>
                                                    <span class="clearable">
                                                        <input type='text' id='searchByName' placeholder='Enter name' class="deletable">
                                                        <i class="clearable__clear">&times;</i>
                                                    </span>
                                                </th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
     </div>
</div>

wolfgt

kthorngren, but to attempt your troubleshooting step, I commented out the datatable initialization and reloaded the page. The table header shows with the search box as expected (since it is in the HTML code) but that is it. No mystery 0.

My assumption is that the 0 in the initial load is the counter for the scroller. But that assumption goes out the window when the zero still appears in the background of the completed table.

kthorngren

I tried your code in this test case:
http://live.datatables.net/covatezo/1/edit

I'm not seeing the 0. The only changes are the ajax and the number of columns (to match the data returned).

Kevin

wolfgt

You definitely helped me find the issue. Your test did have at least one other difference than mine. The JS and CSS files you were loading. Seeing the ones you loaded made me notice that I was missing the CSS file for scroller. When I added that, the 0 went away and was replaced by a pretty striped background while loading and made the background zero go away. Mystery solved.

I know this is probably a silly issue, but I have been looking for that darn zero in my code for days. I'm glad I posted, thank you for your help. I hope this helps someone else in the future.