Question

我有一个使用Datatables在SpringBoot应用程序的Thymeleaf模板上定义的数据表的定义

<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: 'companyName' },
               { 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>

但是有一个Javascript问题：

Uncaught TypeError: Cannot read property 'reload' of undefined

这就是我在模板中使用的所有导入：

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

Answer 1

问题是dataTable()返回的是jQuery对象而不是Datatables API。您需要使用DataTable()，请注意大写字母D.第一个FAQ解释了这一点。

Answer 2

$('#workerEventTable').dataTable(...)不会返回具有.ajax属性的对象。如果你想在ajax调用完成后做一些事情，你可以使用类似的东西：

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

查看documentation of ajax。

未捕获的TypeError：无法读取未定义的属性'reload'

2 个答案: