Support for tables with HTML5 progress bar

JMOmandown

Is there any intention to include support for progress bars within tables? Currently DataTables fails to load on any table which may include a progress bar within a row / column. It would make sense to pull the value of the progress bar and treat it as a normal integer.

allan

Are you able to show me the sort of HTML that you are looking to use? I'm not sure sure what you mean by a progress bar in the table. It should certainly be possible to put an input element into the cells in the table.

Regards,
Allan

JMOmandown

Twig Based example, although I have used outside without success as well. DataTables will fail at the implementation of tables containing HTML objects such as progress bars. Once it fails on a table, the jQuery on all subsequent tables on the page will fail.

<table id="example-table" class="table table-hover text-center example-table">
  <thead>
    <tr>
      <th class="col-md-4 text-center">Name</th>
      <th class="col-md-4 text-center">Type</th>
      <th class="col-md-2 text-center">Score</th>
      <th class="col-md-2 text-center">Cost</th>
    </tr>
  </thead>
  <tbody>
  {% for example_id,example in object_totals['totals'] %}
  <tr>
    <td rowspan="2">
      <a href="/link-to-whatever"> {{ example['name'] }}</a>
    </td>       
    <td>Example</td>
    <td>
      <progress value="{{ example['score']" max="100"></progress>
    </td>
    <td>
      <progress value="{{ example['cost']" max="1000"></progress>
    </td>           
  </tr>
   {%endfor%}
  </tbody>
</table>

<script>
jQuery(document).ready(function() {
    jQuery('table.example-table').DataTable( {
        dom: 'Bt',
        buttons: [
            {
                extend: 'copyHtml5',
                exportOptions: {
                 columns: ':contains("Office")'
                }
            },
            'excel',
            'csvHtml5',
            'pdf'
        ],
        'lengthMenu': [-1, 'All'],
    });
});
</script>

allan

Thanks for the clarification. I've just tried putting a little example together and it seems to work okay for me: http://live.datatables.net/wimihugi/1/edit .

Can you link me to a page that shows the issue please?

Allan

F12Magic

@allan 's example works for me on FF 52.0

You also could use my percentageBars plugin renderer, published by Allan on github. All you would need is a percentage value in your table cell. No html needed anymore. And the bar can be styled if you wanted to.
You can see it in action on codepen.

JMOmandown

@F12Magic that is a fantastic suggestion I was not aware of and I will have to look into incorporating that.

@allan actually your code fails partially as well. If you add another row with a different progress bar value, it will not allow for sort on that column. With that said, the loading issue was related to a typo! Comparing the two code sets allowed me to catch it. Either way the script still is not working as intended with regards to html on progress bar objects. It does however work using the percentageBars plugin:

Your Example: http://live.datatables.net/wimihugi/4/

Another Example: http://live.datatables.net/wimihugi/3/

All that was edited in your example was simply adding an additional row.

F12Magic

If you have problems sorting when table cells got custom content, you can add a data-order attribute to the table cell tag. Just put in the value and datatables will look at that to do the sorting.
Something like:

<td data-order="75">75%</td>

Your second example adjusted with data-order: http://live.datatables.net/rimeyicu/1/edit

JMOmandown

Beautiful simplistic solution F12. Works as designed.

F12Magic

Glad to be of any help.