javascript - Uncaught TypeError: Cannot read property 'reload' of undefined - Stack Overflow

admin管理员组

文章数量:1400041

I have this definition of a Datatable defined on a Thymeleaf template of a SpringBoot application, using Datatables

<script th:inline="javascript">
/*<![CDATA[*/   

$(document).ready(function() {

    var table = $('#workerEventTable').dataTable( {
        order: [[ 0, "desc" ]],
        select: true,
        bLengthChange: false,
        stateSave: true,
        pageLength: 20,
        ajax: 'http://127.0.0.1:1234/acerinox/api/workerevent/datatableList',      
           "columns": [
               { data: 'id' },
               { data: 'deviceId' },
               { data: 'panyName' },
               { data: 'description' },
               { data: 'battery' },
               { data: 'dateTime' },
               { data: 'signal' },           
               { data: 'data' },
               { data: 'alarm' }
           ] 
    });

    setInterval( function () {
        table.ajax.reload( null, false ); // user paging is not reset on reload
    }, 1000 );


    table.on('select.dt deselect.dt', function() {
          localStorage.setItem( 'DataTables_selected', table.rows( { selected: true }).toArray() )   
    })

} );

/*]]>*/
</script>

But there is a Javascript problem:

Uncaught TypeError: Cannot read property 'reload' of undefined

and this are all the imports I use in the template:

<script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
<script src=".12.1/jquery-ui.min.js"    ></script>
<script src=".10.16/js/jquery.dataTables.min.js"></script>

I have this definition of a Datatable defined on a Thymeleaf template of a SpringBoot application, using Datatables

<script th:inline="javascript">
/*<![CDATA[*/   

$(document).ready(function() {

    var table = $('#workerEventTable').dataTable( {
        order: [[ 0, "desc" ]],
        select: true,
        bLengthChange: false,
        stateSave: true,
        pageLength: 20,
        ajax: 'http://127.0.0.1:1234/acerinox/api/workerevent/datatableList',      
           "columns": [
               { data: 'id' },
               { data: 'deviceId' },
               { data: 'panyName' },
               { data: 'description' },
               { data: 'battery' },
               { data: 'dateTime' },
               { data: 'signal' },           
               { data: 'data' },
               { data: 'alarm' }
           ] 
    });

    setInterval( function () {
        table.ajax.reload( null, false ); // user paging is not reset on reload
    }, 1000 );


    table.on('select.dt deselect.dt', function() {
          localStorage.setItem( 'DataTables_selected', table.rows( { selected: true }).toArray() )   
    })

} );

/*]]>*/
</script>

But there is a Javascript problem:

Uncaught TypeError: Cannot read property 'reload' of undefined

and this are all the imports I use in the template:

<script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.min.js"    ></script>
<script src="https://cdn.datatables/1.10.16/js/jquery.dataTables.min.js"></script>

• javascript
• jquery
• datatables

Share Improve this question Follow edited Feb 7, 2018 at 13:52 T.J. Crowder 1.1m200200 gold badges2k2k silver badges1.9k1.9k bronze badges asked Feb 7, 2018 at 13:49 en Lopesen Lopes 2,1731515 gold badges5656 silver badges102102 bronze badges 4

• Is there documentation that suggests that the return value of dataTable is an object with an ajax property? Because clearly it isn't... – T.J. Crowder Commented Feb 7, 2018 at 13:51
• Add console.log(table) to the code to see what the actual properties of table are. You can also add a debugger; above the failing line to inspect the table object, hovering over it, drilling into the properties. – Nope Commented Feb 7, 2018 at 13:53
• The problem is that dataTable() is returning a jQuery object not a Datatables API. You will want to use DataTable() instead, note the capital D. The first FAQ explains this. – K Thorngren Commented Feb 7, 2018 at 14:34
• @KThorngren, please convert to answer. It works ! – en Lopes Commented Feb 7, 2018 at 14:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The problem is that dataTable() is returning a jQuery object not a Datatables API. You will want to use DataTable() instead, note the capital D. The first FAQ explains this.

$('#workerEventTable').dataTable(...) does not return an object with an .ajax property. If you want to do something after the ajax call pletes you could use something like:

$('#example').dataTable( {
  "ajax": function (data, callback, settings) {
    callback(
      dostuff();
    );
  }
});

Have a look at the documentation of ajax.

本文标签： javascriptUncaught TypeError Cannot read property 39reload39 of undefinedStack Overflow