Most of the time the result of the first call is 0, meaning that you have an empty array.
In this case, however, your function will end early. That's because the second condition doesn't make sense, and will never return true:
if(data.results.length > 0) {
// No need to perform the same checks as before here
}
So, you end up doing something like this:
var data = {results: []};
$.get("ajax/data.php", function (data) {
if (data.results.length == 0) {
$(data.results).each(function (index, value) {
// ... code here
});
}
// Other code here
});
This doesn't make sense at all. You cannot use the data structure in your first conditional, because the response from the server might be empty. You'd have to test the first condition anyway, since otherwise the loop would loop indefinitely:
$.get("ajax/data.php", function (data) {
if (data.results.length > 0) {
$(data.results).each(function (index, value) {
// ... code here
});
}
});
In any case, I'd also advise you to be extremely cautious in what you're doing. JSONP is a notoriously bad way to fetch data, and should only be used if there are absolutely no alternatives available. You should cache your data in a storage outside the script, and parse it on demand instead.
A:
In your $.get callback you are making a request to get data and in the callback you are making an entirely new request to get more data. So how do you expect $.get() to know when to call $.get()?
The better thing to do would be to do all your querying on the same page. So if you were going to fetch 'a' then wait for it, why aren't you querying that data from a 'data' array? Then just set the data array to the response from the first request. If there is no data set up then just call $.get() and give it an empty callback function.
function getData(data) {
if(data.results) {
return data.results;
}
$.get("ajax/data.php", function (data) {
if (data.results.length == 0) {
return;
}
data.results = data.results.concat(getData(data));
return data;
});
}
I haven't test that code so let me know if it doesn't work and I can fix it.
A:
Have you considered using the jQuery DataTables plug-in for jQuery?
Here is a link to the DataTables documentation with all the included options:
http://datatables.net/
Allows ajax to be used to retrieve data from the server, and populate the table on the page.
Provides advanced datatypes like datatypes, and arrays as values.
Supports sorting, pagination, and other features.
Includes sorting, paging, searching, and multi-column features.
EDIT:
My main concern is to keep the order of values intact.
What about creating the table on the fly?
EDIT:
Ok, I have taken a look at your JS Fiddle.
You need to set DataTable parameters before initializing it:
$('select#department').change(function() {
if ($(this).val() == 'Select Department') {
alert('no selection');
return;
}
$("table").dataTable( {
"bServerSide": true,
"sAjaxSource": 'ajax/departments.php',
"bPaginate": false,
"sPaginationType": "full_numbers"
});
});
Then in your PHP file you will need to create the data.
At the bottom of the PHP file, just before the last ?> you should have a section that looks like this:
$results = mysql_query("SELECT * FROM departments WHERE DepartmentID = $DepartmentID") or die(mysql_error());
$table = array();
while($row = mysql_fetch_array($results)){
$table[] = $row;
}
$table = json_encode($table);
echo $table;
The function json_encode will give you proper formatted JSON.
EDIT:
With the new added content, to show all departments and hide departments that have no department entries (forgot to add these in my first edit), try this:
$(function() {
var ajaxParams = {
type: "POST",
url: "ajax/departments.php",
dataType: "json",
success: function(result) {
var datatable;
var data = $.parseJSON(result);
var $thead = $('#example tbody').first().find('tr:first');
if (result.length === 0) {
$('#example tbody').html('
No data |
');
return;
} else {
$('#example').DataTable( {
"bServerSide": true,
"sAjaxSource": "ajax/departments.php",
"bPaginate": false,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "mDataProp": "DepartmentID" },
{ "mDataProp": "DepartmentDescription" },
{ "mDataProp": "DepartmentShortName" },
{ "mDataProp": "DeparmentNumber" },
{ "mDataProp": "DepartmentType" },
{ "mDataProp": "DepartmentCategory" }
]
});
}
},
error: function() {
console.log("ERROR: An error occured while attempting to retrieve the departments data.");
}
};
$('#select-department').change(function() {
$("#example").dataTable().fnDestroy();
$("#example").empty().fnDraw(false);
$("#example").dataTable(ajaxParams).fnDraw();
});
});
If this isn't working try to remove the bServerSide from the $.fn.DataTable definition.
