Sorting Data Dropdown on searchBuilder

cuspenser

Apologies if this has already been answered, but I couldn't find it in my review of the options and searching the forums. Is it possible to sort the list of columns in the "Data" dropdown on searchBuilder alphabetically? It appears they are listed in order that the columns appear in the table, but if a table has quite a few columns, it would be easier for end users to locate the column of interest to filter on if they were sorted alphabetically.

Thanks!

Tanner

kthorngren

The options in this example are sorted automatically regardless of the table sorting. Can you provide a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

cuspenser

Thanks for the reply, Kevin. In my application we’re initializing via buttons, so if you look at that example, you’ll see the field are listed in the “Data” menu in the order of the columns.

kthorngren

Sorry I misunderstood. I thought you meant the values for the column. I'm not sure about sorting the Data dropdown differently. @allan can let you know if there is a way or if an enhancement can be created.

Kevin

allan

Sorry, no. There isn't a way to do that in SearchBuilder at the moment. This is the function where there would need to be a change to add that. Probably the best way is to have it has an option for SearchBuilder.

I've added it to the list, but I can't yet say when I'll get to it I'm afraid.

Allan

edknittel

I'm able to get the alphabetically sorting to work by updating the function that @allan mentioned. I'd probably want this as a DT config so it could be enabled on a case-by-case basis.

/**
 * Populates the data / column select element
 */
Criteria.prototype._populateData = function () {
    var columns = this.s.dt.settings()[0].aoColumns;
    var includeColumns = this.s.dt
        .columns(this.c.columns)
        .indexes()
        .toArray();

    // Clear the data in the dropdown and append the title
    this.dom.data.empty().append(this.dom.dataTitle);

    // Create an array to store the options
    var options = [];

    for (var index = 0; index < columns.length; index++) {
        // Check that the column can be filtered on before adding it
        if (
            this.c.columns === true ||
            includeColumns.includes(index)
        ) {
            var col = columns[index];
            var opt = {
                index: index,
                origData: col.data,
                text: (
                    col.searchBuilderTitle || col.sTitle
                ).replace(/(<([^>]+)>)/gi, ''), // Remove any HTML tags
            };

            // Add option to the array
            options.push(opt);
        }
    }

    // Sort options alphabetically by text
    options.sort(function (a, b) {
        return a.text.localeCompare(b.text);
    });

    // Append sorted options to the dropdown
    options.forEach(function (opt) {
        var optionElement = $$3('<option>', {
            text: opt.text,
            value: opt.index,
        })
            .addClass(this.classes.option)
            .addClass(this.classes.notItalic)
            .prop('origData', opt.origData)
            .prop('selected', this.s.dataIdx === opt.index);

        this.dom.data.append(optionElement);

        // If the option is selected, remove 'selected' from the title
        if (this.s.dataIdx === opt.index) {
            this.dom.dataTitle.removeProp('selected');
        }
    }, this); // 'this' is passed as the second argument to retain context for 'this.classes'
};

allan

Super - thanks for posting back with your solution.

Allan