Bootstrap-table filter-control extension populating select with complete list of options

Question

I am using bootstrap-table for working with data from my database.

I use the pagination features and only send back the number of rows requested by the user using the limit and offset options.

I am also using the table-control extension to allow for easy filtering of the results. However when I use a the select control for filtering with data-filter-control="select" the entries are just those returned within that set of results.

As I apply other filters the list will grow. I would like to use the API and have it preload a list of all possible items from the server for that list to allow for filtering via those options.

While I can send the results back with each filtered set of results, perhaps in a separate element of the JSON, it would likely be best to load this list after the control itself loads as I do not constantly need to be sending that set of data to the control with each filter.

Is this possible? Can I use the API to preload this list with a set of values?

There is an issue on github that seems to describe a similar issue to what I'm having https://github.com/wenzhixin/bootstrap-table/issues/904 and note of a patch, but I'm not sure how to implement that.

I am using bootstrap 3.3.4 from maxcdn.bootstrapcdn.com and I am using bootstrap-table 1.8.1 via cdnjs.cloudflare.com

Edit: I have figured this out after using FireBug to step through the code line by line to figure out if I could do this.

There are two options for supplying data to the filter. Add the attribute data-filter-data to the . You can utilize a "var" or "url" option followed by an underscore (or some other character that gets discarded) and then in the case of "var" pass it an object name, mine looks like this data-filter-data="var_OnlineValues" and utlizes my object var OnlineValues = { "": "", "Started" : "Started", "Submitted" : "Submitted" }. I also have some data on the server that I am returning as JSON. data-filter-data="url_filename.php" and the object returned is a key/value pair.

I hope this helps.

Hexachord

Answer 1

Usage Add data-filter-data attribute to the column.

Example:

<script>
var payment_methods = {
  "PP": "PayPal - PP",
  "CC": "PayPal - CC"
};
</script>

<th data-field="payment_method" data-sortable="true" data-filter-control="select" data-filter-data="var:payment_methods">Payment Method</th>

There's no document for the filterData option, so I had to read the code. I quoted the relevant part below. There is substring(0,3) and the valid value is url or var. The next character is ignored.

If the type is url it makes the ajax call to populate the response JSON into the select options. The structure is simple {key:value}.

If the type is var it looks up window[filterDataSource] which is the global variable specified by the option. The data structure is simple {key:value} object.

    if (column.filterData !== undefined && column.filterData.toLowerCase() !== 'column') {
        var filterDataType = column.filterData.substring(0, 3);
        var filterDataSource = column.filterData.substring(4, column.filterData.length);
        var selectControl = $('.' + column.field);
        addOptionToSelectControl(selectControl, '', '');

        switch (filterDataType) {
            case 'url':
                $.ajax({
                    url: filterDataSource,
                    dataType: 'json',
                    success: function (data) {
                        $.each(data, function (key, value) {
                            addOptionToSelectControl(selectControl, key, value);
                        });
                    }
                });
                break;
            case 'var':
                var variableValues = window[filterDataSource];
                for (var key in variableValues) {
                    addOptionToSelectControl(selectControl, key, variableValues[key]);
                }
                break;
        }
    }

Pyrex

Really well done. It works perfectly. (the var part only tested) – Ferricyanide

Answer 2

You do not need to modify bootstrap table to make this work. There is a way to set default values to the dropdown select using the data-filter-data property of the columns. try adding the following:

to the head:

<head>
    // ... included scripts go here also
    <script>
        var filterDefaults = {
            somekey: 'some string value',
            anotherkey: 'another value'
        };
    </script>
</head>

then, add data-filter-data:'var:filterDefaults' to the column:

<table id="table"
      data-toggle="table"
      data-filter-control="true">
     <thead>
         <tr>
             <th data-field="id">ID</th>
             <th data-field="name" data-filter-control="input">Item Name</th>
             <th data-field="price" data-filter-control="select" data-filter-data="var:filterDefaults">Item Price</th>
         </tr>
     </thead>
</table>

Pawnshop