fnReloadAjax always show ten data, bLengthChange not working and dataTable pagging not show

ombak

Hai advance, I got problem when use fnReloadAjax,
- my goal is initialization dataTable without load data at first load page, and data will load after click trigger (search button).
- my problem is data always show ten row, bLengthChange not working and dataTable pagging not show. this my DOM information:

_bInitComplete -> true
_iDisplayEnd -> 10
_iDisplayLength -> 50
_iDisplayStart -> 0
_iRecordsDisplay -> 0
_iRecordTotal -> 0

this my code:

[code]
$(document).ready(function() {

var tblKkm = kkmDataTable();

searchButton(tblKkm);
});

/**
* function search button
*
*/
function searchButton(oTable) {
$("#search-kkm").bind("click", function() {
var obj = {};
obj.tahun_id = $('select[name="tahun-ajaran"]').val();
obj.tingkat = $('select[name="tingkat"]').val();
obj.semester = $('select[name="semester"]').val();

//...encode URL
var stringifyObj = encodeURIComponent(JSON.stringify(obj));

oTable.fnReloadAjax('kriteria_ketuntasan_minimum/populate_pelajaran_kkm/?q=' + stringifyObj, null, true);
});
}

/**
* function create table dataTable
*/
function kkmDataTable() {
var tblKKM = $("#tbl-kkm").dataTable({
"fnDrawCallback": function() {
addNilaiKkm(this);
},
"bLengthChange": false,
"bSort": false,
"bFilter": true,
"bProcessing": true,
"bStateSave": true,
"iDisplayLength": <?php echo ($this->settings_lib->item('site.list_limit')) ? $this->settings_lib->item('site.list_limit') : 15; ?>,
"sPaginationType": 'bootstrap',
"aoColumns": [
{ 'sTitle' : 'pelajaran id', 'bVisible': false },
{ 'sTitle' : 'tahun id', 'bVisible': false },
{ 'sTitle' : 'Pelajaran', 'sWidth':'40%' },
{ 'sTitle' : 'Nilai KKM', 'sWidth':'10%', 'sClass': ' center' },
{ 'sTitle' : 'Terbilang' },
]
});
return tblKKM;
}

[/code]

if advance have different way for my problem please show me the way.
thanks.