How to append someting or render a column for serverside datatable ?

SAKIF

I need to add a percentage sign to a column, I would like to keep it as a numeric value and append a "%" sign for the values of the column. My Datatable creation is from the server side.

"columns": [
{ data: 'Process_Level', name: "Process_Level ", autowidth: true },
{ data: 'org_Name', name: "org_Name", autowidth: true },
{ data: 'PayRoll_Prv', name: "PayRoll_Prv", autowidth: true },
{ data: 'PayRoll_Cur', name: 'PayRoll_Cur', autowidth: true },
{ data: 'Payroll_Var', name: 'Payroll_Var', autowidth: true },
{ data: 'PayRollVarPer', name: 'PayRollVarPer', autowidth: true },
{ data: 'PayRollTotRecPrv', name: 'PayRollTotRecPrv', autowidth: true },
{ data: 'PayRollTotRecCur', name: 'PayRollTotRecCur', autowidth: true },
{ data: 'PayRollTotVar', name: 'PayRollTotVar', autowidth: true },
{ data: 'PayRollTotBatPrv', name: 'PayRollTotBatPrv', autowidth: true },
{ data: 'PayRollTotBatCur', name: 'PayRollTotBatCur', autowidth: true },
{ data: 'PayRollBatVar', name: 'PayRollBatVar', autowidth: true },
],

This is how I am binding the data to the table after the ajax call . Btw I am using C# for asp.net mvc project.

kthorngren

Using Orthogonal Data you can display the percentage sign but keep the numeric value for sorting and searching.

Kevin

SAKIF

@kthorngren I tried rendering but the data field ends up being null . I would greatly appreciate it If you could point me to a example similar to mine.

kthorngren

Both the page I referenced and the columns.render page have some examples. I put together a simple one for you:
http://live.datatables.net/nihevivi/1/edit

Kevin

SAKIF

Thanks @kthorngren

    $("#tblPayroll").DataTable({
        dom: 'lBfrtip',
        buttons: [
                            {
                                extend: 'excelHtml5',
                                text: '<i class="far fa-file-excel"style="font-size: 25px"></i><span> Export to Excel',
                                title: 'yourFilename ' + $("#EventDates option:selected").val(),
                            }
        ],
        "lengthMenu": [[300, 10, 25, 50], ["All", 10, 25, 50]],
        responsive: true,
        // "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": false, // this is for disable filter (search box)
        "orderMulti": false, // for disable multiple column at once
        "searching": true,
        "ajax": {
            url: "/yourajax",
            "data": function (d) {
                d.ajaxfield= $("#EventDates option:selected").val();
            },
            "type": "POST",
            "datatype": "json"

        },
        "language":
        {
            "emptyTable": "Comparison not available for the Dates"
        },
        "columns": [
            { data: 'a', name: "a", autowidth: true },
            { data: 'b', name: "b", autowidth: true },
            { data: 'c', name: "c", autowidth: true },
            { data: 'd', name: 'd', autowidth: true },
            { data: 'e', name: 'e', autowidth: true },
            { data: 'f', name: 'f', autowidth: true },
            { data: 'g', name: 'g', autowidth: true },
            { data: 'h', name: 'h', autowidth: true },
            { data: 'i', name: 'i', autowidth: true },
            { data: 'j', name: 'j', autowidth: true },
            { data: 'k', name: 'k', autowidth: true },
            { data: 'l', name: 'l', autowidth: true },
        ],
        "columnDefs": [
            {
                targets: 5, render: function (data, type, row, meta) {
                    return (type === 'display' || type === 'filter')? data + '%' : data;
                }
            },

]
});