Render 2 columns at the same time as bullet lists

silkspin

What I currently do is take the contents from multiple columns, and concatenate them into a bullet list in another column. So in this example the content from 3 columns (text1, text2, text3) are shown as a list in in target:2

render: function(data, type, row) {
  if (row["text1"] !== "") {
    var a1 = '<li>' + row["text1"] + '</li>';
  } else {
    a1 = "";
  }
  if (row["text2"] !== "") {
    var a2 = '<li>' + row["text2"] + '</li>';
  } else {
    a2 = "";
  }
  if (row["text3"] !== "") {
    var a3 = '<li>' + row["text3"] + '</li>';
  } else {
    a3 = "";
  }

  return data + '<ul>' + a1 + a2 + a3 + '</ul>';

},
targets: 2,

Now I need to do the same again with another 3 columns and concatenate them into the target:3

render: function(data, type, row) {
  if (row["moretext1"] !== "") {
    var b1 = '<li>' + row["moretext1"] + '</li>';
  } else {
    b1 = "";
  }
  if (row["moretext2"] !== "") {
    var b2 = '<li>' + row["moretext2"] + '</li>';
  } else {
    b2 = "";
  }
  if (row["moretext3"] !== "") {
    var b3 = '<li>' + row["moretext3"] + '</li>';
  } else {
    b3 = "";
  }

  return data + '<ul>' + b1 + b2 + b3 + '</ul>';

},
targets: 3,

I initially used a variation on https://datatables.net/examples/advanced_init/column_render.html to achieve this, but what should the structure of the code be to achieve both (or multiple renders) at the same time?

allan

They are on different columns, so you would just apply them in the array:

columnDefs: [
  {
    target: 2,
    render: ...
  },
  {
    target: 3,
    render: ...
  },

I'd be tempted to define a function that takes three arguments - the three property names, and returns a rendering function that will build the string up as needed:

render: combiner('text1', 'text2', 'text3')

Allan

silkspin

Brilliant @allan. Thanks.