Data visualisation using jQuery DataTables

Question

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?

Please provide a sample or example Data that would appear in the Rows. — Twisty
– Twisty, Commented Jul 7, 2021 at 19:36
Your code appears to be using something called <RichtigeRate> - but it should be using the HTML <progress> element - see here. — andrewJames
– andrewJames, Commented Jul 7, 2021 at 19:53

Twisty · Accepted Answer · 2021-07-07 22:30:14Z

Consider the following example.

$(function() {
  $('#statisticforstudent').DataTable({
    "paging": true,
    "ordering": false,
    "info": false,
    "bLengthChange": false,
    select: false,
    searching: false,
    columns: [{
      name: "Kapitel"
    }, {
      name: "RichtigeRate",
      render: function(data, type, row, meta) {
        return type === 'display' ?
          '<progress value="' + data + '" max="1"></progress>' :
          data;
      }
    }]
  });
});

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<table id="statisticforstudent" class="table-responsive" style="width:100%">
  <thead>
    <th>Kapitel</th>
    <th>RichtigeRate</th>
  </thead>
  <tbody>
    <tr>
      <td>1001</td>
      <td>0.1234</td>
    </tr>
    <tr>
      <td>1002</td>
      <td>0.2500</td>
    </tr>
    <tr>
      <td>1003</td>
      <td>0.3333</td>
    </tr>
  </tbody>
</table>

This appears to work and uses the <progress> element as suggested in the Datatables Example you provided.

See More: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

Collectives™ on Stack Overflow

Data visualisation using jQuery DataTables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related