Two gets generated and none of the functions work

nemati_mojgan

Link to test case:https://www.uhn.ca/Physicians-Listings/Pages/research-profiles.aspx
Debugger code (debug.datatables.net): umizoc
Error messages shown: No specific error message
Description of problem: Using SharePoint (2013), SPServices and JQuery DataTable, the table renders data from a SharePoint list, but none of the features of the Datatable seems to trigger due to generating an extra <tbody> tag that contains (No data available in table) above the <tbody> that pulls data from SharePoint list. Have tried on Dev and Prod with local files and CDN with the same result. Please assist. Many thanks!

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/autofill/2.3.5/js/dataTables.autoFill.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/autofill/2.3.5/js/autoFill.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.5/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.5/js/responsive.jqueryui.min.js"></script>

<script>
    $(document).ready(function() {

        $().SPServices({
            operation: "GetListItems",
            webURL: '/',
            listName: 'Physician',
            CAMLQuery: "<Query><Where><Eq><FieldRef Name='Active' /><Value Type='Boolean'>1</Value></Eq></Where><OrderBy><FieldRef Name='LastName' Ascending='true' /></OrderBy></Query>",
            
            completefunc: function (xData, status) {    
                var liHtml = "<tbody>";
                $(xData.responseXML).SPFilterNode("z:row").each(function() {
                
                    var physicianID = $(this).attr("ows_ID");
                    var physicianTitle = "Dr. " + $(this).attr('ows_FirstName') + " " + $(this).attr('ows_LastName');
                        physicianTitle = physicianTitle.replace(/\'/g,'&apos;');
                    var physicianThumb = $(this).attr("ows_Photo");
                    var physicianResearch = $(this).attr("ows_Profile");
                    
                    if (physicianResearch == "undefined" || physicianResearch == null) {
                        physicianResearch = "Missing Research Profile";
                    }
                    else {
                        physicianResearch = physicianResearch.split(", ")[0];
                        physicianResearch = "<a href='" + physicianResearch + "' title='Research profile - " + physicianTitle + "' target='_blank'>Research Profile</a>";
                    }

                    liHtml = liHtml + "<tr><td><a href='/PatientsFamilies/Search_Doctors/Pages/doctor_detail.aspx?doctor=" + physicianID + "' title='UHN Physician Profile - " + physicianTitle + "'>" + physicianTitle + "</a></td><td>" + physicianResearch + "</td></tr>";
                });
                    liHtml +="</tbody>";
                    //alert (liHtml);
                    $("#example").append(liHtml);
                
            }
        });
        
        $('#example').DataTable( {
            "dom": 'Rlfrtip',
            responsive: true,
            colReorder: true
        } );

    });

</script>

<table class="table table-bordered table-hover table-striped" id="example" width=100%>
    <thead><tr><th>Physician</th><th>Research Profile</th></tr></thead>
</table>

kthorngren

If you are getting two tbody tags then my guess is that you are initializing Datatables before the completefunc is finished. So Datatables initializes a blank table - empty tbody then the completefunc appends another to that. Move the Datatables init code inside completefunc after you build the table.

Kevin