datatable loads perfectly on first run but has no style and bad data on 2nd run etc

shougom

I have a datatable that is loading into an html table after an ajax call and then i build out a row object and each TD and set the html tables rows in a .each() jquery method. On first success of ajax call it loads great. But when I try to get new data the table has no styling and is not correct. Any ideas what I could be doing wrong?

html

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="NovusAGENDA_files/jquery-ui-1.12.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<table id="meetingdata" class="display">
                                <thead>
                                    <tr class="hidden-mobile">
                                        <th>
                                            Date

                                        <th>
                                            Meeting Type
                                        </th>
                                        <th id="ctl00_ContentPlaceHolder1_rptMeetings_ctl00_thPublicSiteShowAgendaHtml" class="mobile-portrait-hidden" style="text-align: center;">Online Agenda</th>
                                        <th id="ctl00_ContentPlaceHolder1_rptMeetings_ctl00_thPublicSiteShowAgendaPdf" class="mobile-portrait-hidden" style="text-align: center;">Download Agenda</th>
                                        <th id="ctl00_ContentPlaceHolder1_rptMeetings_ctl00_thPublicSiteShowMinutesPdf" class="mobile-portrait-hidden" style="text-align: center;">Legal Minutes</th>
                                    </tr>
                                </thead>
                                <tbody id="mtgbody"></tbody>
                            </table>

Jquery

<script>
  if ($("#meetingdata > tbody > tr").length > 0) {
                            $("#mtgbody").empty();
                        }

$.ajax({
                            type: "GET",
                            url: theUrl,
                            contentType: "application/json",
                            dataType: "json",
                            success: function (data) {
                             data = JSON.parse(data);
                            $.each(data.dtMtg, function (i, f) {

var tblRow = "<tr><td style=width: 13%>" + hackdate + "<span class=date-search descending><i class=icon-ascending></i><i class=icon-descending></i></span></td><td>" + novus_meetingType + "</td><td align=center class=mobile-portrait-hidden width=12%><div style=text-align-center>" + agendaUrl + "</div></td>" + downloadAgengaUrl + "</td><td align=center width=12%>" + minutesUrl + "</a></td></tr>";

                                    $(tblRow).appendTo("#meetingdata tbody");

                                });
                                 //set html table to jquery datatables
                                $('#meetingdata').DataTable();

</script>

kthorngren

I think the problem is when your code runs the $("#mtgbody").empty(); empties the table but Datatables doesn't know about it since you aren't using Datatable APIs. When $('#meetingdata').DataTable(); is executed for the second time it doesn't knwo about the change so it doesn't update the table.

Try using destroy to have Datatables destroy is current Datatable and create a new one, something like this:

//set html table to jquery datatables
$('#meetingdata').DataTable({
  destroy: true
});

Kevin

shougom

Thanks for the tip. So this time I did this. On the same exact spot in the code as above and drawing the table correctly but its the same data everytime no matter what query i send.

$('#meetingdata').DataTable({
  destroy: true
});

kthorngren

but its the same data everytime no matter what query i send.

Have you validated the data being returned from the ajax request?

If the data is different then maybe you need to use clear() followed by destroy(). Maybe something like this:

  if ($("#meetingdata > tbody > tr").length > 0) {
                            $("#mtgbody").empty();
                            $('#meetingdata').DataTable().clear();
                            $('#meetingdata').DataTable().destroy();
                        }

Kevin

shougom

I tried that i just cant seem to get the right combination of the code and timing down on reload. Am I setting the initial datatable variable in the correct place is what im questioning. Basically after ajax success at the bottom of success Im assigning my html table to an instance of DataTable. I tried clear and destroy but was getting some type of callback error. I wonder if DataTable object can take care of flushing the rows out of html table on redraw(). Instead of me manually checking for tbody and tr length > 0. Its really close but just not quite right yet. I really appreciate your help.

shougom

Kevin im going to look at this example you provided someone in the past and see if it helps in some way.

http://live.datatables.net/hopepicu/1/edit

kthorngren

One thing you may need to do is move $("#mtgbody").empty(); after the clear() and destroy(). If you ahve it before it may be causing the errors.

Kevin

shougom

That got it. Thanks Kevin!!