rows.Add issue SCRIPT5007: Unable to get property 'rows' of undefined or null reference

rows.Add issue SCRIPT5007: Unable to get property 'rows' of undefined or null reference

musclebreastmusclebreast Posts: 3Questions: 2Answers: 0
edited January 29 in Free community support


I have the following error:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


    <link rel="stylesheet" type="text/css" href="otps_enhancements/DataTables/DataTables-1.10.12/css/jquery.dataTables.min.css"/>
    <script type="text/javascript" src="otps_enhancements/DataTables/DataTables-1.10.12/js/jquery.dataTables.min.js"></script>
[// <script src="ajax.js"></script>

    <link rel="stylesheet" type="text/css" href="otps_enhancements/DataTables/Buttons-1.5.1/css/buttons.dataTables.min.css"/>
    <script type="text/javascript" src="otps_enhancements/DataTables/Buttons-1.5.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="otps_enhancements/DataTables/jszip-v3.1.5-1/dist/jszip.min.js "></script>
[// <script type="text/javascript" src="otps_enhancements/DataTables/Buttons-1.5.1/pdfmake.min.js "></script>
    <script type="text/javascript" src="otps_enhancements/DataTables/Buttons-1.5.1/vfs_fonts.js "></script>
    <script type="text/javascript" src="otps_enhancements/DataTables/Buttons-1.5.1/js/buttons.print.min.js"></script>
    <script type="text/javascript" src="otps_enhancements/DataTables/Buttons-1.5.1/js/buttons.html5.min.js"></script>


        .tightTable {
            padding-top: 20px;
            padding-bottom: 20px;
            background: linear-gradient(61deg,#090e2c 0,#122c69 59%,#078db3 100%);
            background-color: #111b58;



 var table_global;
 var tableData2;
 function fillTableRecursive(startIndex) {

            url: "objId=script=none&startindex=" + startIndex + "&inputlabel1=",
            success: function(data) {
                    var jsonData1 = $.parseJSON(data);
                    var tableData1 =;
                    var tableColumns1 = jsonData1.columns;
                    console.log(tableData1.length );
                    console.log(tableData1 );
                if (tableData1.length > 0) {
                    if (tableData1.length >= 100) {
                        fillTableRecursive(startIndex + 100);
            error: function() { 
                console.log("Error while receiving data starting at index " + startIndex);

$(document).ready(function() {


            url: "objId=script&nexturl=none&startindex=1&inputlabel1=",

            success: function(data){

                try {
                    var jsonData = $.parseJSON(data);
                    var tableData =;
                    tableData2 =;
                    var tableColumns = jsonData.columns;
                console.log(tableData.length ); 
                                    console.log(tableData );
                    var table_global = $('#example').DataTable({
                            dom: 'Bfrtip',
                            data: tableData,
                            paging: false,
                                    buttons: [
                                                'copy', 'excel', 'print'

                                           // Setup - add a text input to each footer cell
                   // $('#example thead tr:eq(1) th').each( function () {
                    $('#example thead tr:eq(1) th').each( function () {
                        // console.log($(this));
                        var title = $(this).text();
                        $(this).html( '<input type="text" placeholder="Suche '+title+'" class="column_search" />' );
                    } );
                    // specific column searchfiels
                    $( '#example thead'  ).on( 'keyup input', ".column_search",function () {
                                .column( $(this).parent().index() )
                                .search( this.value )
                        } );    
                catch(e) {
                        alert("ERROR: " + e);
            error: function(){alert("ERROR2: " + e);



});  // End of document ready function


<div style="background-color:white">

   <table width="100%" class="display" id="example">
            <tr id="dataid">




The initial load works. As next I call the function fillTableRecursive to add further rows. I call the same script and get the same object array back as in the initial load, but then I get the following error: SCRIPT5007: Unable to get property 'rows' of undefined or null reference

Has anybody a hint what can be the problem if I try to add the same result twice and in the first run it works but not in the second?

Many thanks,


Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

This question has an accepted answers - jump to answer


  • kthorngrenkthorngren Posts: 18,217Questions: 25Answers: 4,323
    Answer ✓

    Looks like a scoping issue. You have var table_global; in line 53 which sets a global variable, In the success function you have var table_global = $('#example').DataTable({ on 111. The var will create the variable table_global within the scope of the success function. This is not accessible outside the function like table_global.rows.add(tableData1[0]).draw(); in the fillTableRecursive() function.

    Either remove the var from line 111. Or get an instance of the API in the fillTableRecursive() function, like this:

    var table_global = $('#example').DataTable();


  • musclebreastmusclebreast Posts: 3Questions: 2Answers: 0

    Hi Kevin,

    oh million thanks...You were right and it is working now:)

    Thanks alot,


Sign In or Register to comment.