loop with columns.searchPanes.options

tefdat

I have probably more a javascript question than its belonging to searchpanes or datatables.

I am using custom searchpanes for creating a dynamic panes.
I have an array with 170 strings and this would lead to following code:

{
    data: dataColumns[2].data,
    title: dataColumns[2].title,
    searchPanes: {
        options: [
                {label: 'Car', value: (rowData, rowIdx) => (rowData.sub.match(/car/i))},
                {label: 'House', value: (rowData, rowIdx) => (rowData.sub.match(/house/i))},
                //..170 times
                {label: 'Sea', value: (rowData, rowIdx) => (rowData.sub.match(/sea/i))}
                ]
    }
}

--> Test-Case
Interestingly the performance does not suffer even with 170 calls

Thats not very pretty and would me lead to a lot of edits, if something changes in my search strings.
Is there a better & working way with a loop by iterating the searchArray (included as comment block in test-case)?

Worked on that the whole day - was not able to get in run because of the options.value() function.

var searchArr = ['Car', 'House', 'Sea']
{
    data: dataColumns[2].data,
    title: dataColumns[2].title,
    searchPanes: {
        options: [
            function(){
                let retObj = {}
                searchArr.map(function (myEl) {
                    let singleObj = {
                        label: myEl,
                        value: function(rowData, rowIdx) {
                            return rowData.sub.match(/myEl/i);
                        }
                    }
                    retObj += singleObj
                })
                return retObj
            }(),
    }
}

Thanks in advance.

colin

I did something similar to what you were doing, but by building up the options before initialising the table - see your updated example here.

The 'interesting' bit of the code is here:

  let options = [];
  searchArr.forEach(function(el) {
    options.push({
      label: el,
      value: function(rowData, rowIdx) {
        var re = new RegExp(el, 'i');
        return rowData[0].match(re);
      }
    })
  })

Hope that helps,

Colin

tefdat

@colin thats exactly what i was looking for - perfect!
Just tested with my environment - working flawlessly and fast.
Thank you so much.

For just the case, if someone else stumping over this - I slightly adapted it here to make it a bit more flexible per function call.

$(document).ready( function () {
var searchArr_1 = ['Car', 'House', 'Sea'];
function buildCustomSearchPane(searchArr) {
    let options = []
    searchArr.forEach(function (singleString) {
        options.push({
            label: singleString,
            value: function (rowData, rowIdx) {
                var re = new RegExp(singleString, "i");
                return rowData[0].match(re);
            },
        });
    });
    return options
}
//..
//..
columnDefs:[
        {
            searchPanes:{
              show: true,
              options: buildCustomSearchPane(searchArr_1)
            },
            targets: [0]
        },