Problem using pagination (server-side) - filter control option - export extensions

[rmarzocchi84]

Description

I try to use:

• pagination with server side application
• filter-control extension
• export extension.

I have about 5000 rows (excel exported of 1.26 MB)

I have two problem:

1. Pagination with server-side do not works

2. If I remove pagination (I do not know if data-pagination="false" data-side-pagination="server" has any sense ) the export is very slow (and browser crash)

<div class="table-responsive-sm">

    
      <div id="toolbar"> Per esportare i dati completi rimuovere la paginazione (primo tasto dopo la ricerca)
      </div>
	<table  id="contenitori" class="table-hover" 
        data-cache="true"
        idfield="targa_contenitore" 
        data-show-columns="true"
        data-group-by="false"
        data-group-by-field='["indirizzo", "frazione"]'
        data-sort-name="val_riemp"
        data-sort-order="desc"
        data-show-search-clear-button="true"   
        data-show-export="true" 
        data-export-type=['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'doc', 'pdf'] 
				data-search="true" data-click-to-select="true" data-show-print="false"  
        data-virtual-scroll="false"
        data-show-pagination-switch="false"
				data-pagination="false" data-page-size=75 data-page-list=[10,25,50,75,100,200,500]
				data-side-pagination="server" 
        data-show-refresh="true" data-show-toggle="true"
        data-show-columns="true"
				data-filter-control="true"
        data-sort-select-options = "true"
        data-filter-control-multiple-search="false"
        data-query-params="queryParams"
        data-url="./tables/report_contenitori_bilaterali.php" 
        data-toolbar="#toolbar" 
        data-show-footer="true"
        >
        
        
<thead>



 	<tr>
        <!--th data-checkbox="true" data-field="id"></th-->  
        <!--th data-field="state" data-checkbox="true" ></th-->  
        <th data-field="id_piazzola" data-sortable="true" data-visible="false"  data-filter-control="input">id</th-->
        <th data-field="indirizzo" data-sortable="true" data-visible="true" data-footer-formatter="idFormatter" data-filter-control="input">Piazzola</th>
        <th data-field="municipio" data-sortable="true" data-visible="true" data-footer-formatter="countFormatter" data-filter-control="select">Municipio</th> 
        <th data-field="quartiere" data-sortable="true" data-visible="false" data-filter-control="select">Quartiere</th>
        <th data-field="frazione" data-sortable="true" data-visible="true" data-filter-control="select">Frazione<br>rifiuto</th>
        <th data-field="targa_contenitore" data-sortable="true" data-visible="false" data-filter-control="input">Targa<br>cont</th>
        <th data-field="volume_contenitore" data-sortable="true" data-visible="false" data-filter-control="select">Volume</th>
        <th data-field="data_ultimo_agg" data-formatter="dateFormat" data-sortable="true" data-visible="true" data-filter-control="input">DataOra<br>agg</th>
        <th data-field="val_riemp" data-sortable="true" data-visible="true" data-filter-control="input">Riemp</th>
        <th data-field="val_bat_elettronica" data-sortable="true" data-visible="true" data-filter-control="input">Batt</th>
        <th data-field="val_bat_bocchetta" data-sortable="true" data-visible="false" data-filter-control="input">Batt<br>bocchetta</th>
        <th data-field="data_ora_last_sv" data-formatter="dateFormat" data-sortable="true" data-visible="true" data-filter-control="input">DataOra<br>svuot</th>
        <th data-field="riempimento_svuotamento" data-sortable="true" data-visible="true" data-filter-control="input">Riemp<br>svuot</th>
        <th data-field="media_conf_giorno" data-sortable="true" data-visible="true" data-filter-control="input">Media<br>conf<br>giorno</th>
        <th data-field="percorsi" data-sortable="true" data-visible="true" data-filter-control="input">Percorsi</th>
        <!--th data-field="targa_contenitore" data-sortable="false" data-formatter="nameFormatterEdit" data-visible="true" >Dettagli</th-->
    </tr>
</thead>
</table>


<script type="text/javascript">



function idFormatter() {
    return 'Tot contenitori:'
  }

  function countFormatter(data) {
    return data.length
  }


var $table = $('#contenitori')

$(function() {
    $table.bootstrapTable()
  })
  


  function queryParams(params) {
    var options = $table.bootstrapTable('getOptions')
    if (!options.pagination) {
      params.limit = options.totalRows
    }
    return params
  }



function dateFormat(value, row, index) {
   return moment(value).format('DD/MM/YYYY HH:mm');
}



  /*data.forEach(d=>{
       data_creazione = moment(d.data_creazione).format('DD/MM/YYYY HH24:MI')
    });*/
    
    function dateFormatter(date) {
      return moment(date).format('DD/MM/YYYY HH:mm')
    }

    function nameFormatterEdit(value, row) {
        
        return '<a class="btn btn-warning" href=./dettagli_percorso.php?cp='+row.cod_percorso+'&v='+row.versione+'><i class="fa-solid fa-pencil"></i></a>';
     
        }

</script>


</div>	<!--end table-->

NOTE: I use the following library

<script src="./vendor/wenzhixin/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="./vendor/wenzhixin/bootstrap-table/dist/locale/bootstrap-table-it-IT.min.js"></script>

<script src="./vendor/hhurz/tableexport.jquery.plugin/tableExport.min.js" ></script>
<script src="./vendor/hhurz/tableexport.jquery.plugin/libs/FileSaver/FileSaver.min.js" ></script>
<script src="./vendor/hhurz/tableexport.jquery.plugin/libs/js-clsx/xlsx.core.min.js" ></script>



<script src="./vendor/wenzhixin/bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.js" ></script>
<script src="./vendor/wenzhixin/bootstrap-table/dist/extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script>
<script src="./vendor/wenzhixin/bootstrap-table/dist/extensions/group-by-v2/bootstrap-table-group-by.min.js"></script>
<script src="./vendor/wenzhixin/bootstrap-table/dist/extensions/export/bootstrap-table-export.js"></script>

Example(s)

No response

[rmarzocchi84]

Here an example https://live.bootstrap-table.com/code/rmarzocchi84/17191

I try to add an example of my json here https://raw.githubusercontent.com/rmarzocchi84/test_data/main/data.json but it seems do not works with example

[wenzhixin]

Your response data is not a server-side pagination format.
https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data2.json
You can update your data or update the sidePagination to client.
More info: https://bootstrap-table.com/docs/api/table-options/#sidepagination