PHP mysql order by is not working as expected - mysql

Question

I am trying to display data from mysql data base in HTLM-css (used bootstrap) tabel. But the query result is not displaying as expected in the order of 'ID'. Can somebody help me to solve my issue?
Thanks in advance.
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
<div class="alert alert-info">
<strong><center>Delete Multiple Data:Check the Box and click the Delete button to Delete Data </strong></center>
</div>
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>Value Date</th>
<th>Type</th>
<th>Amount</th>
<th>Donated By</th>
<th>Paid To</th>
</tr>
</thead>
<tbody>
<?php
$query=mysql_query("select * from temple_txn order by id desc")or die(mysql_error());
while($row=mysql_fetch_array($query)){
$id=$row['id'];
?>
<tr>
<td><input name="selector[]" type="checkbox" value="<?php echo $id; ?>"></td>
<td><?php echo $row['id'] ?></td>
<td><?php echo $row['value_date'] ?></td>
<td><?php echo $row['txn_type'] ?></td>
<td><?php echo $row['txn_amount'] ?></td>
<td><?php echo $row['donated_by'] ?></td>
<td><?php echo $row['paid_to'] ?></td>
</tr>
<?php } ?>
</tbody>
</table>
(JS DT_bootstrap)
/* Set the defaults for DataTables initialisation */
$.extend( true, $.fn.dataTable.defaults, {
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
} );
/* Default class modification */
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
} );
/* API method to get paging information */
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages": oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
};
};
/* Bootstrap style pagination control */
$.extend( $.fn.dataTableExt.oPagination, {
"bootstrap": {
"fnInit": function( oSettings, nPaging, fnDraw ) {
var oLang = oSettings.oLanguage.oPaginate;
var fnClickHandler = function ( e ) {
e.preventDefault();
if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
fnDraw( oSettings );
}
};
$(nPaging).addClass('pagination').append(
'<ul>'+
'<li class="prev disabled">← '+oLang.sPrevious+'</li>'+
'<li class="next disabled">'+oLang.sNext+' → </li>'+
'</ul>'
);
var els = $('a', nPaging);
$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
},
"fnUpdate": function ( oSettings, fnDraw ) {
var iListLength = 5;
var oPaging = oSettings.oInstance.fnPagingInfo();
var an = oSettings.aanFeatures.p;
var i, ien, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
if ( oPaging.iTotalPages < iListLength) {
iStart = 1;
iEnd = oPaging.iTotalPages;
}
else if ( oPaging.iPage <= iHalf ) {
iStart = 1;
iEnd = iListLength;
} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
iStart = oPaging.iTotalPages - iListLength + 1;
iEnd = oPaging.iTotalPages;
} else {
iStart = oPaging.iPage - iHalf + 1;
iEnd = iStart + iListLength - 1;
}
for ( i=0, ien=an.length ; i<ien ; i++ ) {
// Remove the middle elements
$('li:gt(0)', an[i]).filter(':not(:last)').remove();
// Add the new list items and their event handlers
for ( j=iStart ; j<=iEnd ; j++ ) {
sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
$('<li '+sClass+'>'+j+'</li>')
.insertBefore( $('li:last', an[i])[0] )
.bind('click', function (e) {
e.preventDefault();
oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
fnDraw( oSettings );
} );
}
// Add / remove disabled classes from the static elements
if ( oPaging.iPage === 0 ) {
$('li:first', an[i]).addClass('disabled');
} else {
$('li:first', an[i]).removeClass('disabled');
}
if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
$('li:last', an[i]).addClass('disabled');
} else {
$('li:last', an[i]).removeClass('disabled');
}
}
}
}
} );
/*
* TableTools Bootstrap compatibility
* Required TableTools 2.1+
*/
if ( $.fn.DataTable.TableTools ) {
// Set the classes that TableTools uses to something suitable for Bootstrap
$.extend( true, $.fn.DataTable.TableTools.classes, {
"container": "DTTT btn-group",
"buttons": {
"normal": "btn",
"disabled": "disabled"
},
"collection": {
"container": "DTTT_dropdown dropdown-menu",
"buttons": {
"normal": "",
"disabled": "disabled"
}
},
"print": {
"info": "DTTT_print_info modal"
},
"select": {
"row": "active"
}
} );
// Have the collection use a bootstrap compatible dropdown
$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
"collection": {
"container": "ul",
"button": "li",
"liner": "a"
}
} );
}
/* Table initialisation */
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "bootstrap",
"oLanguage": {
}
} );
} );

Answer 1

It seems that you fetch the data from your database in the correct order. Based on our conversation in the question's comments, I think that your problem is caused by the JS library DataTables or the bootstrap plugin after pageload. To ensure this, deactivate the JavaScript and see if the rows are in correct order if they are not touched by the plugin.
If DataTables tries to sort by the values in the first column (you have some HTML in there), this could explain the seemingly random sorting. Try setting an implicit order/sort setting (reference). Your ID is in the second column and the column index is zero-based, so this would be it:
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "bootstrap",
"oLanguage": {},
"aaSorting": [[1,'desc']]
});
});