DataTables wont work in my app
DataTables wont work in my app
fiks
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>
This discussion has been closed.
Replies
What happens?
Do you get any errors?
Kevin
That's not going to work. It would generate HTML such as:
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
@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".
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" }
]
} );
Thanks of porting back. Good to hear you've got it working now.
Allan