Data visualisation using jQuery DataTables

I was trying to use the DataTables plugin to make data visualisation work. And from the website we can see the result:

Here is the link: https://datatables.net/examples/basic_init/data_rendering.html

And I also want to make it work in my Laravel project, and here is my result:

but nothing happened. I think maybe the data source is different?

This is my view:

<table id="statisticforstudent" class="table-responsive" style="width:100%">
  <thead>
    <th>Kapitel</th>
    <th>RichtigeRate</th>
  </thead>
  <tbody>
  @foreach($statistic_students as $value)
    <tr>
      <td>{{$value -> chapters_id}}</td>
      <td>{{$value -> correct_rate_stu}}</td>
    </tr>
  @endforeach                   
  </tbody>                                           
</table>

and my JavaScript:

<script>
        $(document).ready( function () {
            $('#statisticforstudent').DataTable({
               "paging":   true,
               "ordering": false,
               "info":     false,
               "bLengthChange": false,
               //"iDisplayLength" : 10,
               //lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
               //"scrollY":        "200px",
               //"scrollCollapse": true,
               // "paging":         false
               //"pagingType": "full_numbers",
               select: false,
               searching : false,
               columns: [
               {
                data: 'correct_rate_stu',
                render: function(data, type, row, meta) {
                    return type === 'display' ?
                        '<RichtigeRate="' + data + '" max="1"></RichtigeRate>' :
                        data;
                }
               ]
            },
            });
        });
      </script>

Has anyone an idea? Or has anyone some better visualisation plugin?