DataTables wont work in my app

fiks

I fell in love with DataTables and I started using it. At first it worked but stooped as soon as a I used Ajax to connect to MySQL db.

My app (iREPS) collects electricity meter data with lat/lon from the field present it via html/css/javascript interface. I have a button in the menu called "ERFs". When clicked, it triggers a connection to the db and present all ERFs in a Table. That's where I use DataTables.

my html ...

• ERF Table
• ERF Map
• ERF Chats and Graphs

ERF Charts and Graphs go here

---

I create the table dynamically with jquery after an Ajax call...

---

    function displayErfsTable(erfArray) {
        $("#erfTable").append("<thead>");
            $("#erfTable").append("<tr>");
            $("#erfTable").append("<th>City</th>");
            $("#erfTable").append("<th>Town</th>");
            $("#erfTable").append("<th>area Name</th>");                
            $("#erfTable").append("<th>ERF No</th>");
            $("#erfTable").append("<th>lat</th>");
            $("#erfTable").append("<th>lon</th>");  
            $("#erfTable").append("<th>Dev</th>");  
            $("#erfTable").append("<th>evc</th>");  
            $("#erfTable").append("<th>eem</th>");  
            $("#erfTable").append("</tr>"); 
        $("#erfTable").append("</thead>");
        // Display each row in the ERFs Table 
        for( i = 0; i < erfArray.length; i++ ) {
                var  erfRow = erfArray[i];
            $("#erfTable").append("<tr>");
                $("#erfTable").append("<td> " + erfRow['city'] + " </td>");
                $("#erfTable").append("<td> " + erfRow['town'] + " </td>");
                $("#erfTable").append("<td> " + erfRow['an'] + " </td>");
                $("#erfTable").append("<td> " + erfRow['erf_no'] + " </td>");
                $("#erfTable").append("<td> " + erfRow['latitude'] + " </td>");             
                $("#erfTable").append("<td> " + erfRow['longitude'] + " </td>");                    
                $("#erfTable").append("<td> " + erfRow['de'] + " </td>");
                $("#erfTable").append("<td> " + erfRow['evc'] + " </td>");
                $("#erfTable").append("<td> " + erfRow['eem'] + " </td>");      
            $("#erfTable").append("</tr>");
        }
        $("#erfTable").append("<thead>");
            $("#erfTable").append("<tr>");
            $("#erfTable").append("<th>City</th>");
            $("#erfTable").append("<th>Town</th>");
            $("#erfTable").append("<th>Area Name</th>");                
            $("#erfTable").append("<th>ERF No</th>");
            $("#erfTable").append("<th>lat</th>");
            $("#erfTable").append("<th>lon</th>");  
            $("#erfTable").append("<th>Dev</th>");  
            $("#erfTable").append("<th>evc</th>");  
            $("#erfTable").append("<th>eem</th>");  
            $("#erfTable").append("</tr>"); 
        $("#erfTable").append("</thead>");  
    }

---

<script type="text/javascript">
    $(document).ready(function() {
        jQuery.ajax({
            type: "POST", // HTTP method POST or GET
            url: "jq_erf_dbquery.php", //Where to make Ajax calls
            dataType:"json", // Data type, HTML, json etc.
            success:function(erfArray){
                console.log(erfArray);
                displayErfsTable(erfArray);
            },
        });
        $('a[href="#tab_erf_map"]').on('shown.bs.tab', function() {
            jQuery.ajax({
                type: "POST", // HTTP method POST or GET
                url: "jq_erf_dbquery.php", //Where to make Ajax calls
                dataType:"json", // Data type, HTML, json etc.
                success:function(erfArray){
                    plots = erfArray;
                    displayErfsMap(erfArray);
                },
            }); 
        });
        $('#erfTable').dataTable();
    }); 
</script>

kthorngren

What happens?

Do you get any errors?

Kevin

allan

$("#erfTable").append("<thead>");
        $("#erfTable").append("<tr>");
        $("#erfTable").append("<th>City</th>");
        $("#erfTable").append("<th>Town</th>");

That's not going to work. It would generate HTML such as:

<table id="erfTable">
  <thead/>
  <tr/>
  <th>City</th>
  <th>Town</th>
  ...
</table>

Note how the nesting is wrong. You are always just appending to the table element rather than correctly generated valid HTML structure.

If you know the structure in advance, just do .append('<thead><tr><th>...')

Allan

fiks

@Kevin. What get displayed is the table top row (this is from the columns option) followed in the next line by "No data available in table".

fiks

Hi good people. I finally got my Table working. Tnx everyone who tried to help. See code below.

The problem was the confusion I had in regards to Ajax. I also was not understanding the documentation correctly. Had to go over it again. The issue was the data format returned by php and the option to use.

$('#erfTable').DataTable( {
ajax: {
url: 'jq_erf_dbquery.php',
dataSrc: ''
},
"pageLength": 10,
"lengthMenu": [ 10, 50, 100, 150 ],
columns: [
{ data: "city" },
{ data: "town" },
{ data: "erf_no." },
{ data: "an" },
{ data: "de" },
{ data: "eem" },
{ data: "comment" }
]
} );

allan

Thanks of porting back. Good to hear you've got it working now.

Allan