problem sorting table using columnfilter plugin

kingalbert2012

I am trying to sort a column by using the columnfilter plugin and I am having a hard time figuring out how to properly do it the right way.
Its my first time using this columnfilter plugin and as well as using the datatables plugin and its really annoying when I click the header to sort my record the wrong part of the table get sorted. If there is another way of doing it without using the ColumnFilter plugin??? I'm a total newbie and just wanted to learn this sort of things through trial and error :(.. Can somebody help me out on this, Here are the coding attached:
I used the server-side source included in the package and just added 3 additional field below the commented Output section.. I just thought that this might be the main cause of the problem.

PHP:

/*
* Output
*/
$output = array(
"sEcho" => intval($_GET['sEcho']),
"iTotalRecords" => $iTotal,
"iTotalDisplayRecords" => $iFilteredTotal,
"aaData" => array()
);

while ( $aRow = mysql_fetch_array( $rResult ) )
{
$row = array();

/* Add the details image at the start of the display array */
$row[] = ''; //<---- here is the first

/* Approved and Deny Link* filter by track id*/
$row[] = 'Approve';//<---- here is the second
$row[] = 'Deny';//<---- here is the third



JS:

$(document).ready(function() {

oTable = $('#tableview').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "dopanel.php",
// <<----
"aoColumns": [
{"sClass": "center", "bSortable": false },
{"sClass": "center", "bSortable": false },
{"sClass": "center", "bSortable": false },
{"sClass": "center", "bSortable": true, "sName": "track_id", "sTitle": "Track #", "sWidth": "10%" },
{"sClass": "left", "bSortable": true, "sName": "doc_type", "sTitle": "Document", "sWidth": "20%" , "bVisible": true},
{"sClass": "center", "bSortable": true, "sName": "date", "sTitle": "Date", "sWidth": "10%" , "bVisible": true },
{"sClass": "left", "bSortable": true, "sName": "filename", "sTitle": "Filename", "sWidth": "30%" , "bVisible": true },
{"sClass": "left", "bSortable": true, "sName": "remark", "sTitle": "Remarks", "sWidth": "40%" , "bVisible": true },
{"sClass": "center", "bSortable": false, "bVisible": false,"sName": "user_id", "sTitle": "User" },
{"sClass": "center", "bSortable": false, "bVisible": false, "sName": "status", "sTitle": "Status"},
{"sClass": "center", "bSortable": false, "bVisible": false, "sName": "aname", "sTitle": "TName"}
]
//"aaSorting": [[0, 'desc']],
} )
.columnFilter({
aoColumns: [
null,
null,
null,
null,
{type: "select", values: ['Disbursement Voucher', 'Purchase Request'], "aTargets":[5]},
null,
null,
null,
null,
null,
null,
//null
//{type: "date-range", "bVisible": false}
]
});
} );


HTML:




--
--
--
--
--
-


View
Approve
Deny

kingalbert2012

Datatable is really amazing :D
I managed to make the external select box to work by using the method I read here..
http://www.datatables.net/forums/discussion/460/fnfilter-problem/p1
The only thing that still confuse me was the index of the column, how can I sort them by just clicking their thead ? don't know how to explain it in a much detailed approach.
like for example I have a table with 5 columns the very first column was index 0 right? when I click thead[index 0] to sort them out the column with the index of 2 got sorted :(.

here is the js code that help me fix my problem ^_~ cheers!

thanks again pal.
[code]
//<<---- external select form control woot
/*===================================================================*/
$("select#doctype").change(function () {
var val = $("select#doctype option:selected").attr('value');
// var regex = (val == "" ? "": "^"+val+"$");
oTable.fnFilter (val,1,true);
});

var obj, tableToFilter, colToFilter;
function tblFilter(obj, tableToFilter, colToFilter) {
var val = $(obj).val();
if(val == "All") {
tableToFilter.fnFilter("(.*)",colToFilter, false);
tableToFilter.fnDraw();
} else {
tableToFilter.fnFilter("^" + val + "$", colToFilter, false);
}
}
/*===================================================================*/
// <<---------end select here


[/code]