[Need help] Cannot call method 'fnInit' of undefined

longvu

I have a code like that

[code] $.ajax({
type : 'POST',
url : 'classfication_of_productjson.html',
dataType : 'json',
data : {
"limited_num" : limited_num,
"search_bunrui_code" : code,
"orderType" : orderType,
"search_base_date_from" : search_base_date_from,
"search_base_date_to" : search_base_date_to,
"compare_date_from" : compare_date_from,
"compare_date_to" : compare_date_to,
"compare_menu" : compare_menu,
"shopCode0000" : shopCode0000,
"shopCode0001" : shopCode0001,
"shopCode0002" : shopCode0002,
"shopCode0009" : shopCode0009,
"shopCode0003" : shopCode0003,
"shopCode0006" : shopCode0006,
"shopCode9000" : shopCode9000,
"shopCode9001" : shopCode9001
},

success : function(data) {
console.log(data);
$('#dataTable').dataTable({
"bServerSide": true,
"sAjaxSource": data,
"sAjaxDataProp": data,
"bProcessing": true,
"sPaginationType": "full_numers",
"bJQueryUI": true
});
//$('#loadData').html(data);
var elapsed = (new Date().getTime() - start) / 1000;
$("#search_time").html("検索時間
" + elapsed + "(s)");
visibleColumn();
},
beforeSend : call_request,
complete : complete_request,
});
[/code]

When i click on a link it call ajax and draw datatable. i can get the json data from the server. but it has an error " Cannot call method 'fnInit' of undefined"
_fnFeatureHtmlPaginate jquery.dataTables.nightly.js:2872
_fnAddOptionsHtml jquery.dataTables.nightly.js:1729
_fnInitialise jquery.dataTables.nightly.js:2593
(anonymous function) jquery.dataTables.nightly.js:6793
jQuery.extend.each jquery-1.8.3.js:611
jQuery.fn.jQuery.each jquery-1.8.3.js:241
DataTable jquery.dataTables.nightly.js:6366
$.ajax.success classfication_of_product.html:1039
fire jquery-1.8.3.js:974
self.fireWith jquery-1.8.3.js:1084
done jquery-1.8.3.js:7803
callback

I am using Struts2

Thanks for any help

allan

> "full_numers"

Typo - it should be: `"full_numbers"` .

Allan

longvu

@allan could you please explain clear for me? what is Typo - it should be: "full_numbers". Sorry I am new in dataTable

longvu

@allan I fix it to "full_numbers" it has no error, but the table display no thing event the json data return value

allan

In which case, please link to the page so we can debug it. See: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read

Allan

longvu

@allan I think it because of the json object can not map. My return json object is array[obj1{},obj2{}]. Can we have any way to parser json object in datatable

allan

You cannot be returning just an array if you are using server-side processing ( "bServerSide": true ), it has to return an object with the structure described in the documentation: http://datatables.net/usage/server-side

Allan

longvu

@allan my return json object like this
[code] {"returnList":[{"brand_code":"1586","brand_name":"74Daijiro:74ダイジロー","bunrui_code":"0001","bunrui_name":"バイク本体","compare_jyutyuu_hanbai":0,"compare_jyutyuu_profit":0,"compare_jyutyuu_profit_rate":0.0,"compare_jyutyuu_sikiri":0,"compare_jyutyuu_teika":0,"compare_nouhin_hanbai":0,"compare_nouhin_profit":0,"compare_nouhin_profit_rate":0.0,"compare_nouhin_sikiri":0,"compare_nouhin_teika":0,"compare_syouhin_count":0,"dummy_column":"","jyutyuu_hanbai":227000,"jyutyuu_profit":73091,"jyutyuu_profit_rate":32.19,"jyutyuu_sikiri":153909,"jyutyuu_teika":227000,"list_no":0,"nouhin_hanbai":0,"nouhin_profit":0,"nouhin_profit_rate":0.0,"nouhin_sikiri":0,"nouhin_teika":0,"rate_jyutyuu_hanbai":0.0,"rate_jyutyuu_profit":0.0,"rate_jyutyuu_profit_rate":0.0,"rate_jyutyuu_sikiri":0.0,"rate_jyutyuu_teika":0.0,"rate_nouhin_hanbai":0.0,"rate_nouhin_profit":0.0,"rate_nouhin_profit_rate":0.0,"rate_nouhin_sikiri":0.0,"rate_nouhin_teika":0.0,"rate_syouhin_count":0.0,"siire_code":null,"siire_name":null,"siire_rate":85.0,"syouhin_code":"74d001","syouhin_count":1,"syouhin_spec":"","syouhin_sys_code":"20521938","syouhin_sys_name":"74Daijiro 車体"},{"brand_code":"1360","brand_name":"TERRA MOTORS:テラモーターズ","bunrui_code":"0001","bunrui_name":"バイク本体","compare_jyutyuu_hanbai":0,"compare_jyutyuu_profit":0,"compare_jyutyuu_profit_rate":0.0,"compare_jyutyuu_sikiri":0,"compare_jyutyuu_teika":0,"compare_nouhin_hanbai":0,"compare_nouhin_profit":0,"compare_nouhin_profit_rate":0.0,"compare_nouhin_sikiri":0,"compare_nouhin_teika":0,"compare_syouhin_count":0,"dummy_column":"","jyutyuu_hanbai":38000,"jyutyuu_profit":12137,"jyutyuu_profit_rate":31.93,"jyutyuu_sikiri":25863,"jyutyuu_teika":38000,"list_no":0,"nouhin_hanbai":38000,"nouhin_profit":12137,"nouhin_profit_rate":31.93,"nouhin_sikiri":25863,"nouhin_teika":38000,"rate_jyutyuu_hanbai":0.0,"rate_jyutyuu_profit":0.0,"rate_jyutyuu_profit_rate":0.0,"rate_jyutyuu_sikiri":0.0,"rate_jyutyuu_teika":0.0,"rate_nouhin_hanbai":0.0,"rate_nouhin_profit":0.0,"rate_nouhin_profit_rate":0.0,"rate_nouhin_sikiri":0.0,"rate_nouhin_teika":0.0,"rate_syouhin_count":0.0,"siire_code":null,"siire_name":null,"siire_rate":76.0,"syouhin_code":"w-charge-004","syouhin_count":1,"syouhin_spec":"","syouhin_sys_code":"19872078","syouhin_sys_name":"アクシア 専用充電器"}]} [/code]

allan

Okay - that doesn't contain the information needed for server-side processing: http://datatables.net/usage/server-side . I would suggest you disable that option and use mData and sAjaxDataProp to get the data you want.

Allan

longvu

@allan which property that I lack of for server-side processing?

allan

See the documentation here: http://datatables.net/usage/server-side

iTotalRecords, iTotalDisplayRecords and sEcho

Allan

longvu

@Allan i understand about iTotalRecords andiTotalDisplayRecords, but with the sEcho, i have a little confuse about this. Where can i get the sEcho value???

allan

From the data that is passed to the server with the request. Its in the documentation :-)

Allan

longvu

@allan I can show data on the dataTable now. But could you please help me how to add an event for the row of dataTable? Because when I right click on the browser and view source page, I can not see the data of datatable

allan

> But could you please help me how to add an event for the row of dataTable?

Just like you would with any other jQuery event:

[code]
$('#myTable tbody').on( 'click', 'tr', function (e) {
...
} );
[/code]

> Because when I right click on the browser and view source page, I can not see the data of data table

Use Firebug or Inspector in Chrome / Safari.

Allan

longvu

@allan thank you so much. One more question, how can i get some value of the row i clicked

longvu

@allan I can get data from the row i clicked. Thanks for your time