Hi,

I have two questions:

I have a page where I use an Ajax-call to retrieve the data based on a category. See code below. 

I have two questions: 

1. In this case I can only choose the categories in the list. I would want to create an additional categorie with the name of All, retrieving all the records. I do not know how the collection should be changed to use this option.

2. I use the bootstrap-table plugin. Although I use the server-side version, it seems that the plugin does not see the data for filtering and sorting. Anyone any experience with this?

Thanks in advance! 

Code:

<div class="modal" tabindex="-1" id="overlay" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="overlay-modal" id="loadmodal"><center>
        <h2>Laden...</h2>
        <img class="text-center" width="150" src="//assets.bettyblocks.com/7145e46686714057b487bf423c568852_assets/files/loader">
        </center>
      </div>
    </div>
  </div>
</div>
<h3>Categorie(bestek)</h3>
<form action=""> 
<select name="categorie" onchange="showPDC(this.value)">
{% for categorie in categorieen %}
                <option value={{categorie.id}}>{{categorie.betekenis}}
                  {% endfor %}
</select>
</form>
<br>
<table id ="pdctable"
       data-id-field="id"
       data-classes="table table-hover"
       data-buttons-class="primary"
       data-pagination="true"
       data-search="true"
       data-show-export="false"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-filter-control="true" 
       data-side-pagination="server"
       data-page-size="10"
       data-page-list="[10, 50, 250, 1000, 10000]"
        data-show-footer="false"
       data-striped="true"
       data-sortable = "true"
       data-show-pagination-switch="true"
       data-toggle="table"
       data-method="get">
<thead>
  <tr>
      <th data-field="zorgaanbieder" data-filter-control="input" data-sortable="true" data-searchable="true">Zorgaanbieder</th>
        <!--<th data-field="gemeente" data-filter-control="input"  data-sortable="true">Gemeente</th>-->
        <th data-field="Productcategorie" data-filter-control="select" data-sortable="true">Hoofdcategorie</th><!--productcategorie-->
      <th data-field="Productcode" data-filter-control="input" data-sortable="true">Subcategorie</th><!--productcodelijst-->
      <th data-field="Globale_voorziening" data-filter-control="input" data-sortable="true">Voorziening</th><!--globale voorziening-->
        <th data-field="product" data-filter-control="input" data-sortable="true">Product</th>
        <th data-field="begindatum" data-filter-control="input" data-sortable="true">Begindatum</th>
      <th data-field="einddatum" data-filter-control="input" data-sortable="true">Einddatum</th>
      <th data-field="eenheden" data-filter-control="select" data-sortable="true">Eenheden</th>
    <!--  <th data-field="frequentie" data-filter-control="input" data-sortable="true">Frequentie</th>-->
      <th data-field="tarief" data-filter-control="input" data-sortable="true">Tarief</th>
      {% if r_pdc_bijwerken == 'true'%}<th></th>{% endif %}
      </tr>
    </thead>
      <tbody id="txt">
        <!--<tr id ="txt">-->
  </tbody>
</table>
<script>
function showPDC(str) {
  var xhttp;    
  if (str == "") {
    document.getElementById("txt").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    $('#overlay').show();
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("txt").innerHTML = this.responseText;
       
      $('#overlay').hide();
    }
  };
  xhttp.open("GET", "testajaxpdc?categorie="+str, true);
  xhttp.send();
  
}
</script>