Бутстрап-таблица фильтра-управления расширением заполняющий выбор с полным списком опций

Question

Я использую bootstrap-таблицу для работы с данными из моей базы данных.

Я использую функции разбиения на страницы и отправляю обратно количество строк, запрошенных пользователем, используя параметры ограничения и смещения.

Я также использую расширение для управления таблицей, чтобы обеспечить легкую фильтрацию результатов. Однако, когда я использую элемент управления select для фильтрации с помощью data-filter-control = "select", данные только те, которые возвращаются в пределах этого набора результатов.

Поскольку я применяю другие фильтры, список будет расти. Я хотел бы использовать API и предварительно запрограммировать список всех возможных элементов на сервере для этого списка, чтобы разрешить фильтрацию через эти параметры.

Пока я могу отправить результаты с каждым отфильтрованным набором результатов, возможно, в отдельном элементе JSON, было бы лучше всего загрузить этот список после загрузки самого элемента управления, поскольку мне не нужно постоянно отправлять этот набор данных для управления с каждым фильтром.

Возможно ли это? Могу ли я использовать API для предварительной загрузки этого списка с помощью набора значений?

Существует проблема с github, которая, похоже, описывает аналогичную проблему с тем, что у меня есть https://github.com/wenzhixin/bootstrap-table/issues/904, и отметить патч, но я не уверен, как это реализовать.

Я использую загрузчик 3.3.4 из maxcdn.bootstrapcdn.com и я использую самозагрузки-таблицу 1.8.1 с помощью cdnjs.cloudflare.com

Edit: Я понял это после того, как с помощью FireBug к шагу через код по строчке, чтобы выяснить, могу ли я это сделать.

Существует два варианта подачи данных на фильтр. Добавьте данные фильтра данных атрибута в. Вы можете использовать опцию «var» или «url», за которой следует символ подчеркивания (или какой-либо другой символ, который отбрасывается), а затем в случае «var» передать ему имя объекта, мой выглядит как этот data-filter-data = «var_OnlineValues» и utlizes мой объект var OnlineValues ​​= {"": "", "Started": "Started", "Submitted": "Submitted"}. У меня также есть некоторые данные на сервере, которые я возвращаю как JSON. data-filter-data = "url_filename.php", а возвращаемый объект - пара ключ/значение.

Надеюсь, это поможет.

Answer 1

Использование Добавить data-filter-data атрибут в колонку.

Пример:

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

Там нет ни одного документа для опции filterData, так что я должен был прочитать код. Я привел соответствующую часть ниже. Существует substring(0,3), и действительное значение равно url или var. Следующий символ игнорируется.

Если тип url, он вызывает вызов ajax для заполнения ответа JSON в опции выбора. Структура проста {ключ: значение}.

Если тип var, он ищет window[filterDataSource], который является глобальной переменной, указанной в параметре. Структура данных - это простой объект {ключ: значение}.

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; 
     } 
    } 

Answer 2

Вам не нужно изменять таблицу начальной загрузки, чтобы сделать эту работу. Существует способ установить значения по умолчанию для раскрывающегося списка с использованием свойства столбцов data-filter-data. попробуйте добавить следующее:

к голове:

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

затем добавьте data-filter-data:'var:filterDefaults' в колонку:

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