Populate searchPanes.panes.options directly with a single-dimensional array

Loren Maxwell

I'm reviewing the documentation here: https://datatables.net/reference/option/searchPanes.panes.options

where it outlines this format for inputting custom options:

options: [
    {
        label:'Accountants in Tokyo',
        value: function(rowData, rowIdx){
            return rowData[2] === 'Accountant' && rowData[3] === 'Tokyo';
        }
    }
]

However I'm wondering if it couldn't be possible to allow inserting a single-dimension array into a searchPane, such as:

$(document).ready(function() {

    var officeOptions = ["Edinburgh", "London", "New York", "San Francisco", "Singapore", "Sydney", "Tokyo"];

    $('#example').DataTable({
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office",
                searchPanes: {
                    options: officeOptions, // Or something to this effect
                    dtOpts: {
                        order: [0, "asc"]
                    }
                }
            },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    });
});

Then the SearchPane would be populated with those values regardless of what is in the actual column.

To me (and I may be completely wrong) but it seems a large part of the load time for a table with searchPanes included is calculating what the options in the searchPane should be.

I believe I can more quickly do this in PHP and simply supply the array of the values, but I don't see a mechanism for doing that. Plus there might be some other reasons for wanting the searchPane to show different options than what the column itself renders, such as possible values that don't have any records.

Another approach I tried was supplying the list through dtOpts data, but it didn't work:

$(document).ready(function() {

    var officeOptions = ["Edinburgh", "London", "New York", "San Francisco", "Singapore", "Sydney", "Tokyo"];

    $('#example').DataTable({
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office",
                searchPanes: {
                    options: officeOptions,
                    show: true,
                    dtOpts: {
                        data: officeOptions,
                        order: [0, "desc"]
                    }
                }
            },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    });
});

sandy

Hi @Loren Maxwell ,

As of SearchPanes 1.1 server-side processing is supported if that is of interest here. Take a look at this blog post and this page.

As for setting options for a column, you can indeed do that using an array using columns.searchPanes.options.

Hope this helps,
Sandy

Loren Maxwell

Thanks, @sandy.

Using columns.searchPanes.options would it look like this, correct:

$(document).ready(function() {
 
    $('#example').DataTable({
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office",
                searchPanes: {
                    options: [
                        {
                            label: "Edinburgh",
                            value: function(rowData, rowIdx){
                                return rowData[3] === "Edinburgh";
                            }
                        },
                        {
                            label: "London",
                            value: function(rowData, rowIdx){
                                return rowData[3] === "London";
                            }
                        },
                        {
                            label: "New York",
                            value: function(rowData, rowIdx){
                                return rowData[3] === "New York";
                            }
                        },
                        {
                            label: "San Francisco",
                            value: function(rowData, rowIdx){
                                return rowData[3] === "San Francisco";
                            }
                        },
                        {
                            label: "Singapore",
                            value: function(rowData, rowIdx){
                                return rowData[3] === "Singapore";
                            }
                        },
                        {
                            label: "Sydney",
                            value: function(rowData, rowIdx){
                                return rowData[3] === "Sydney";
                            }
                        },
                        {
                            label: "Tokyo",
                            value: function(rowData, rowIdx){
                                return rowData[3] === "Tokyo";
                            }
                        }
                    ],
                    dtOpts: {
                        order: [0, "asc"]
                    }
                }
            },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    });
});

If so, I was hoping there might be a simpler way for a single-dimension array.

sandy

Hi @Loren Maxwell ,

Yes that is how it would look and I'm afraid you couldn't make it any simpler for column specific panes. I can't see a simpler way to configure them on a per column basis.

Maybe worth noting you can also use columnDefs, which would reduce the length of your config if you are letting DataTables detect the columns.

Thanks,
Sandy

Loren Maxwell

Thanks, @sandy.

My only thought is that if I provide the single-dimensional array and specified a column, then perhaps searchPanes could have a function that assigns the label and the value function automatically.

At any rate, thanks for your help over the past couple of days with a few of my posts and certainly thanks for the wonderful extension to DataTables and the awesome support you guys always provide!