Answers

• kthorngren Posts: 21,368Questions: 26Answers: 4,956

  April 2018

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

  Kevin
• SAKIF Posts: 8Questions: 3Answers: 0

  April 2018

  @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 Posts: 21,368Questions: 26Answers: 4,956

  April 2018 Answer ✓

  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 Posts: 8Questions: 3Answers: 0

  April 2018 edited April 2018

  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;
                  }
              },
  

  ]
  });