loop with columns.searchPanes.options

loop with columns.searchPanes.options

tefdattefdat Posts: 42Questions: 7Answers: 3
edited March 2022 in SearchPanes

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 :smile:

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.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,142Questions: 1Answers: 2,586
    Answer ✓

    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

  • tefdattefdat Posts: 42Questions: 7Answers: 3
    edited March 2022

    @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]
            },
    
Sign In or Register to comment.