Searchpanes with CSV string

MatthewBarraud

Hi All

I realise this question has been asked a few times but I can't seem to understand the code enough to ammend it into my own use case, sorry.

I am building a datatable with the following columns and have initialised searchpanes to display filters on the last 4 columns. My PHP code is buidling the table in a foreach loop and the tags displayed as a comma delimited list. E.g. tag1, tag2, tag3

I'd like to split that list into their own tags if possible but can't get my head around the other answers.

Table Structure:
TYPE | FILENAME | VERSION | DEPARTMENT | OWNER | TAGS | STATUS

I'm initialising the table with the following code:

$('#filesList').DataTable( {
searchPanes:{
  layout: 'columns-4'
},
dom:  "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
      "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>" +
      "<'row'<'col-sm-12'tr>>" +
      "<'row'<'col-12'P>>",
columnDefs:[
  {
    searchPanes:{
        show: true,
    },
    targets: [3, 4, 5, 6],
  },
],

"order": [[ 1, "asc" ]]
});

I believe I need something like the answer here? https://datatables.net/forums/discussion/62304/searchpanes-treat-comma-separated-string-as-separate-options but if I add the code it doesn't load the table. I think I am confusing things with the column defs having two targets lines???

Many thanks for your help

Matt

MatthewBarraud

With some fiddling I managed to sort it!

Here is my code for anyone else...

$('#filesList').DataTable( {
searchPanes:{
  layout: 'columns-4'
},
dom:  "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
      "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>" +
      "<'row'<'col-sm-12'tr>>" +
      "<'row'<'col-12'P>>",
columnDefs:[
  {
    searchPanes:{
      show: true,
      orthogonal:'sp'
    },
    targets: [3, 4, 5, 6],
    render: function (data, type, row) {
      if (type === 'sp') {
        return data.split(', ')
      }
      return data;
    }
  },
],

"order": [[ 1, "asc" ]]
});