Question 10977 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Remove dollar sign on export as CSV file on Datatables – Jquery

I am having trouble to remove the dollar sign on export as CSV.

I am editing the datatables.min.js file, I know that this is not recommendable but I need this as I have all export on my all modules.

here is the code of the datatables plugin for export button of CSV.

  v.ext.buttons.csvHtml5 = {
    bom: !1,
    className: "buttons-csv buttons-html5",
    available: function () {
      return g.FileReader !== w && g.Blob;
    },
    text: function (a) {
      return a.i18n("buttons.csv", "CSV");
    },
    action: function (a, b, d, c) {
      this.processing(!0);
      a = I(b, c).str;
      d = b.buttons.exportInfo(c);
      var f = c.charset;
      c.customize && (a = c.customize(a, c, b));
      !1 !== f
        ? (f || (f = p.characterSet || p.charset), f && (f = ";charset=" + f))
        : (f = "");
      c.bom && (a = "" + a);
      B(new Blob([a], { type: "text/csv" + f }), d.filename, !0);
      this.processing(!1);
    },
    filename: "*",
    extension: ".csv",
    exportOptions: {},
    fieldSeparator: ",",
    fieldBoundary: '"',
    escapeChar: '"',
    charset: null,
    header: !0,
    footer: !1,
  };

in this code. How can I customize all columns with dollar sign and remove it on export only?

Tags:

2

Answers


  1. 0

    If your data has $ sign you can keep that as only the number.
    Then while initializing the datatable make the change to display for the columns which require a $ sign inside render function.
    This way since your data will be numerical, export itself will just take the number.

    Check this out for Reference

    Note: If you can’t change the source data then you can probably process it before giving it to the datatables

    Login or Signup to reply.
  2. 0

    If you really want to edit the DataTables source code, I suggest you don’t use datatables.min.js. Instead use the un-minified version of the file (datatables.js). That will be much easier to understand.

    Having said that, I think this is a really bad idea (as you already seem to know) and I really cannot recommend this approach.

    It’s not difficult to do what you want in each DataTable.

    Here is one way (not the only way):

    $(document).ready(function() {

  var table = $('#example').DataTable({
    dom: 'Brftip',
    columnDefs: [{
      targets: [5],
      render: function(data, type, row) {
        return type === 'export' ? data.substring(1) : data;
      }
    }],
    buttons: [{
      text: 'CSV',
      extend: 'csvHtml5',
      name: 'testExport',
      exportOptions: {
        orthogonal: 'export'
      }
    }]
  });

});
    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.css" />

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.js"></script>

  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

  <div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
        </tr>
        <tr>
          <td>Ashton Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$86,000</td>
        </tr>
        <tr>
          <td>Donna Snider</td>
          <td>Customer Support</td>
          <td>New York</td>
          <td>27</td>
          <td>2011/01/25</td>
          <td>$112,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>
    </table>

  </div>

</body>

</html>

    In this approach, we use a columnDefs option to strip the leading $ from data in the Salary column:

    columnDefs: [{ 
  targets: [5], 
  render: function (data, type, row) {
    return type === 'export' ? data.substring(1) : data;
  }
}],

    The leading dollar sign is removed using data.substring(1). You can use whatever logic you need there, if this is not exactly what you want.

    Then, tell the export function to use this modified data:

    exportOptions: {
  orthogonal: 'export'
}

    Even if you need to add this to all of your DataTables now, the time may come when you need a DataTable which does not need this – which is one reason to not attemmpt to edit the source code. (And also you will have a harder time upgrading DataTables if you have edited the source code.)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search