Datatables - Getting rid of zero to left of decimal point

JavaScript
1

I would like to format the number in the footer of my table so that there is no 0 to the left of the decimal point when the number is less than 1.

  • 0.50 would become .50

  • 1.60 would remain 1.60

I have almost no experience with Javascript so if you could answer the question pertaining to my specific situation that would be helpful.

<div align="center">
         <table id = 'mytabl' class="display compact nowrap">
        <thead>
            <tr>
                <th>Number 1</th>
                <th>Number 2</th>
            </tr>
        </thead>
        <tbody>
        {% for num in numberdata.mytable_set.all %}
            <tr>
                <td>{{ num.number1 }}</td>
                <td>{{ num.number2 }}</td>
            </tr>
        {% endfor %}
        </tbody>
             <tfoot>
                    <tr>
                        <th></th>
                        <th></th>
                    </tr>
             </tfoot>
        </table>
                <script>
                $(document).ready(function() {
                  $('#mytabl').DataTable({
                    "searching": true,
                    "pageLength": 40,
                    "scrollX": true,
                    "paging": false,
                    "info": false,
                    drawCallback: () => {
                      const table = $('#mytabl').DataTable();
                      const tableData = table.rows({
                        search: 'applied'
                      }).data().toArray();
                      const totals = tableData.reduce((total, rowData) => {
                        total[0] += parseFloat(rowData[1]);
                        total[1] += parseFloat(rowData[2]);
                        return total;
                      }, [0, 0]);
                      $(table.column(1).footer()).text(totals[0]);
                      $(table.column(2).footer()).text(totals[1]);
                    }
                  })
                });
                </script>
2

You have some sort of templating engine in your HTML.

$(table.column(1).footer()).text(totals[0] < 1 ? String(totals[0]).slice(1) : totals[0]);
$(table.column(2).footer()).text(totals[0] < 1 ? String(totals[1]).slice(1) : totals[1]));

Is a shot in the dark.

3

I added String() because .slice() is not a method of floats.

4

And my last suggestion there has an extra **)** at end, just fyi.

5

Thank you but it didn’t seem to work for me. I’ll keep working at it to see if its a mistake on my end.

6

And for column 2 I assume you meant (totals[1] < 1 ?

You indexed zero there instead of one. You meant 1 right?

7

You’re missing the end piece-- scroll to right on example I gave you.

8

Oh right., yeah it should be 1.

9

Yeah, cant get that to work. Anybody else have a solution for this

10

Given a string version of a number, if the first digit is zero, strip it and return the rest of the string, else return the original string.

function stripZero(numStr) {
  return numStr[0] === "0" ? numStr.slice(1) : numStr;
}

So

stripZero("0.25") // returns ".25"
stripZero("1.25") // returns "1.25"
stripZero("0") // returns ""

Note that it has to take a string, so would need to do totals[0].toString() or whatever.

.text(stripZero(totals[0].toString()))