DataTables wont work in my app

DataTables wont work in my app

fiksfiks Posts: 15Questions: 2Answers: 0

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 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>

Replies

  • kthorngrenkthorngren Posts: 21,247Questions: 26Answers: 4,929

    What happens?

    Do you get any errors?

    Kevin

  • allanallan Posts: 63,350Questions: 1Answers: 10,443 Site admin
    $("#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

  • fiksfiks Posts: 15Questions: 2Answers: 0

    @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".

  • fiksfiks Posts: 15Questions: 2Answers: 0

    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" }
    ]
    } );

  • allanallan Posts: 63,350Questions: 1Answers: 10,443 Site admin

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

    Allan

This discussion has been closed.