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

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

lsl031lsl031 Posts: 7Questions: 1Answers: 0
edited August 2017 in Free community support

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() ; })

});

This question has accepted answers - jump to:

Answers

  • lsl031lsl031 Posts: 7Questions: 1Answers: 0

    HTML CODE:

    firstName lastName
  • lsl031lsl031 Posts: 7Questions: 1Answers: 0

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

  • lsl031lsl031 Posts: 7Questions: 1Answers: 0

    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() ; })

    });

  • kthorngrenkthorngren Posts: 21,322Questions: 26Answers: 4,948
    Answer ✓

    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

  • lsl031lsl031 Posts: 7Questions: 1Answers: 0

    it works!thanks very much!

  • lsl031lsl031 Posts: 7Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 21,322Questions: 26Answers: 4,948
    Answer ✓

    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

  • lsl031lsl031 Posts: 7Questions: 1Answers: 0

    Thanks,Kevin。

This discussion has been closed.