Draw a % in Same Column/Row after Data was Drawn

zgoforth

Hello,
I am writing data to a datatable that has 8 different tabs. 2 of the tabs include number strings that are supposed to represent a %. Is it possible that I can draw a % sign after the number to remain in the cell where the number is populating?

Here is my JS:

fetch(mili)
        .then((response) => response.json())
        .then((data) => {
            if (data.d != null && data.d != undefined && data.d.results.length > 0) {
                var table = $('#weeklyweight').DataTable();
                var table1 = $('#overallweight').DataTable();
                var table2 = $('#weeklysteps').DataTable();
                var table3 = $('#overallsteps').DataTable();
                var table4 = $('#weeklyminutes').DataTable();
                var table5 = $('#overallminutes').DataTable();
                var table6 = $('#steppoints').DataTable();
                var table7 = $('#minutepoints').DataTable();
                table.rows.add(data.d.results).draw('%');
                table1.rows.add(data.d.results).draw();
                table2.rows.add(data.d.results).draw();
                table3.rows.add(data.d.results).draw();
                table4.rows.add(data.d.results).draw();
                table5.rows.add(data.d.results).draw();
                table6.rows.add(data.d.results).draw();
                table7.rows.add(data.d.results).draw();
            }
            //console.log(item.Name, item.Weight, item.WeeklyWeight, item.Steps, items.WeeklySteps, item.ExerciseMinutes, item.WeeklyExerciseMin, item.StepPoints, item.MinutePoints);
            //console.log(item.Name.Title);
        });
    }
    
    $(document).ready( function () {
            function filterGlobal () {
                $('#weeklyweight').DataTable().search(
                    $('#global_filter').val()
                ).draw();
                $('#overallweight').DataTable().search(
                    $('#global_filter').val()
                ).draw();
                $('#weeklysteps').DataTable().search(
                    $('#global_filter').val()
                ).draw();
                $('#overallsteps').DataTable().search(
                    $('#global_filter').val()
                ).draw();
                $('#weeklyminutes').DataTable().search(
                    $('#global_filter').val()
                ).draw();
                $('#overallminutes').DataTable().search(
                    $('#global_filter').val()
                ).draw();
                $('#steppoints').DataTable().search(
                    $('#global_filter').val()
                ).draw();
                $('#minutepoints').DataTable().search(
                    $('#global_filter').val()
                ).draw();
            }
              
              var table = $('#weeklyweight').DataTable({
                    "columns": [
                        { "data": "Name.Title" },
                        { "data": "WeeklyWeight" }
                    ],
                    "order": [[ 1, "desc" ]]
              });
              var table1 = $('#overallweight').DataTable({
                "columns": [
                    { "data": "Name.Title" },
                    { "data": "Weight" }
                ],
                "order": [[ 1, "desc" ]]
              });    
              var table2 = $('#weeklysteps').DataTable({
                    "columns": [
                        { "data": "Name.Title" },
                        { "data": "WeeklySteps" }
                    ],
                    "order": [[ 1, "desc" ]]   
              });
              var table3 = $('#overallsteps').DataTable({
                    "columns": [
                        { "data": "Name.Title" },
                        { "data": "Steps" }
                    ],
                    "order": [[ 1, "desc" ]]   
              });
              var table4 = $('#weeklyminutes').DataTable({
                    "columns": [
                        { "data": "Name.Title" },
                        { "data": "WeeklyExerciseMin" }
                    ],
                    "order": [[ 1, "desc" ]]
              });
              var table5 = $('#overallminutes').DataTable({
                    "columns": [
                        { "data": "Name.Title" },
                        { "data": "ExerciseMinutes" }
                    ],
                    "order": [[ 1, "desc" ]]
              });
              var table6 = $('#steppoints').DataTable({
                    "columns": [
                        { "data": "Name.Title" },
                        { "data": "StepPoints" }
                    ],
                    "order": [[ 1, "desc" ]]   
              });
              var table7 = $('#minutepoints').DataTable({
                    "columns": [
                        { "data": "Name.Title" },
                        { "data": "MinutePoints" }
                    ],
                    "order": [[ 1, "desc" ]]  
              });

              $('input.global_filter').on( 'keyup click', function () {
                filterGlobal();
              } );
              loadData();
            } );

zgoforth

Ive tried everything I could possibly thank of and nothing is working: all variations of

var table = $('#weeklyweight').DataTable({
                    "columns": [
                        { "data": "Name.Title" },
                        { "data": "WeeklyWeight" + "%" }
                    ],
                    "order": [[ 1, "desc" ]]
              });

It is concatenating to the WeeklyWeight and causing an error and nothing to post to the table.

kthorngren

Try using a number renderer.

Kevin

zgoforth

Error:

DataTables warning: table id=weeklyweight - Requested unknown parameter 'WeeklyWeight' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

What I tried

var table = $('#weeklyweight').DataTable({
                    "columns": [
                        { "data": "Name.Title" },
                        { "data": "WeeklyWeight",
                          "render" : "$.fn.dataTable.render.number( ',', '.', 2, '%' )" }
                    ],
                    "order": [[ 1, "desc" ]]
              });

zgoforth

UPDATE

var table = $('#weeklyweight').DataTable({
                    "columns": [
                        { "data": "Name.Title" },
                        { "data": "WeeklyWeight", render : $.fn.dataTable.render.number( ',', '.', 2, '%' ) }
                    ],
                    "order": [[ 1, "desc" ]]
              });

This is outputting %{data value} instead of {data value} %

zgoforth

Disregard I figured it out.