"Uncaught TypeError: Cannot read property 'length' of undefined

lsl031

I use python to get data from server,and user ajax to update datables,but there is error as below:

"Uncaught TypeError: Cannot read property 'length' of undefined
at xb (datatables.min.js:91)
at datatables.min.js:89
at i (datatables.min.js:87)
at Object.success ((index):131436)
at c (jquery-1.10.2.min.js:4)
at Object.fireWith [as resolveWith] (jquery-1.10.2.min.js:4)
at k (jquery-1.10.2.min.js:6)
at XMLHttpRequest.r (jquery-1.10.2.min.js:6)

can help me resolve this problem?thanks very much！

the python code:

/db_info_ajax/:
def db_info_ajax(request):
import json
conf={
"employees": [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
}
return HttpResponse(json.dumps(conf))

html的内容：

firstName	lastName

the js code:
var oTable = null;
var initUserList = function () {
var table = $('#db_conf');
if (oTable == null) {
oTable = table.dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/db_info_ajax/",
"fnServerData": retrieveData,
"fnServerParams": function (aoData) {
aoData.push(
{ "name":"db_name","value": $('#form-field-select-1').val()} ) },
"columns": [
{ "emplyees": "firstName" },
{ "emplyees": "lastName" } ],
});
}
oTable.fnDraw();
console.log('fnDraw');
}

function retrieveData(sSource, aoData, fnCallback) {
$.ajax({
"type": "post",
"url": sSource,
"dataType": "json",
"data": aoData,
"success": function(resp) {
fnCallback(resp);
} });
}

jQuery(document).ready(function ()
{ initUserList();
$(".a_post").click(function () {
alert('dsadda');
initUserList() ; })

});

lsl031

HTML CODE:

firstName	lastName

lsl031

</table class="table table-striped table-bordered table-hover" id="db_conf">
</thead>
</tr>
</th>firstName</th>
</th>lastName</th>
</tr>
</thead>
</table>

lsl031

var oTable = null;
var initUserList = function () {
var table = $('#db_conf');
if (oTable == null) {
oTable = table.dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/db_info_ajax/",
"fnServerData": retrieveData,
"fnServerParams": function (aoData) {
aoData.push(
{ "name":"db_name","value": $('#form-field-select-1').val()} ) },
"columns": [
{ "emplyees": "firstName" },
{ "emplyees": "lastName" } ],
});
}
oTable.fnDraw();
console.log('fnDraw');
}

function retrieveData(sSource, aoData, fnCallback) {
$.ajax({
"type": "post",
"url": sSource,
"dataType": "json",
"data": aoData,
"success": function(resp) {
fnCallback(resp);
} });
}

jQuery(document).ready(function ()
{ initUserList();
$(".a_post").click(function () {
alert('dsadda');
initUserList() ; })

});

kthorngren

Where I would start is to change your columns to match the structure defined in columns.data:

Change "employees" to "data":

"columns": [
{ "data": "firstName" },
{ "data": "lastName" } ],
});

Then change your dictionary to match:

conf={
"data": [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
}

See if that gets you further.

Kevin

lsl031

it works!thanks very much!

lsl031

but if i want get two json dict data from python to update two diffrent tables ,how can i specify the columns.data？thanks！

kthorngren

two diffrent tables ,how can i specify the columns.data?

Datatables, by default, expects the data to be returned in a data object. When defining in Datatables you will always use the word data and define the appropriate columns for each table.

Kevin

lsl031

Thanks,Kevin。