How to replace row value with a string using dynamic datatables - javascript

Question

I'm using Datatables to get the state for e-mails

for example, 0 is for unsubscribed and 1 for subscribed

I want to replace "0" and "1" for "unsubscribed" and "subscribed"

In my HTML I have this

<table class="table table-striped table-bordered table-hover"
       id="mail-recipient-table">
  <thead>
  <tr>
    <th>{{__('digestReport.columns.item')}}</th>
    <th>{{__('digestReport.general.name')}}</th>
    <th>{{__('digestReport.general.email')}}</th>
    <th>{{__('digestReport.table.columns.email_state')}}</th>
  </tr>
</table>

And in my javascript I have this:

$(document).ready(function () {
  let dataTable;
  let itemCounter = 1;
  axios.get('{{route('digest-report.mail-recipients', $digestReport->id)}}')
.then((response)=>{
    dataTable= $('#mail-recipient-table').DataTable({
      "processing": true,
      "autoWidth": false,
      "responsive": true,
      "dom": '<t>ip',
      "order": [0, 'asc'],
      "language": {
        "url": '{{session('locale') == 'en' ? "//cdn.datatables.net/plug-ins/1.10.20/i18n/English.json" : "//cdn.datatables.net/plug-ins/1.10.20/i18n/Japanese.json"}}',
        "buttons": {
          "reload": '{{__('tableButtons.reload')}}'
        }
      },
    });
    $.each(response.data,function (i,e){
      addRow(itemCounter, e.name, e.email, e.state);
      itemCounter++;
    });
  });

  function addRow(itemCounter,name,email, state){
    dataTable.row.add([
      itemCounter,
      name,
      email,
      state
    ]);
  }
})

My datatable works correctly but shows 0 and 1 for my state column

How can I replace it?

Phaelax · Accepted Answer · 2021-02-01 18:56:23Z

1

You need to set a render method in your table definition:

$myTable = $('#myTable').DataTable({
    columnDefs: [
        {targets: 3, render:subRender}
    ]
});


function subRender(data, type){
    if (type === 'display'){
        if (data == "0") return "Unsubscribed";
        if (data == "1") return "Subscribed";
        return data;
    }
    return data;
}

This allows you to display data anyway you want (even return html) without affecting the underlying data used in sorting or other calculations.

answered Feb 1, 2021 at 18:56

Phaelax

2,0542 gold badges11 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to replace row value with a string using dynamic datatables - javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related