Well, I have configured my bootstrap table to show the refresh button in the toolbar.
data-show-refresh="true"
The data-url table property is correctly configured. Proof of this is that the table is filled correctly when you load the page. Besides, I have verified that the corresponding method of the controller is reached
But if you hit the refresh button on the toolbar, this happens: We reach the correct method of the correct controller, a correct model is generated, a correct json is created from that correct model, this json reaches the user (I check it from the browser), but the table does not update the data that has changed DB. In any case, it is strange, when I hit refresh, although it does nothing, the table momentarily remains blank and then the data appears again. As if it had refreshed something, but no.
If I reload the page (and return just a View("myview",model), not a Json(model)), the updated values will be displayed. I can't find the error, any help, I would appreciate it.
Reading the documentation, I have seen how, from an event in jquery, a refresh of the table is generated. I do not prefer to do that. It is not possible to use the toolbar refresh button, included in this bootstrap table???
I added a button to refresh the table, calling the same method in the controller. I verified again the json provided is updated. So, using the next JS code:
$.ajax({
url: '/Home/RefrescarTabla',
method: 'GET',
data: {},
dataType: 'json',
cache: false,
success: function (data) {
table.bootstrapTable('load', data);
table.bootstrapTable('destroy');
table.bootstrapTable();
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
data: data
});
},
error: function (error) {
}
});
Still not working. Even, I saw how the table is detroyed, but is loading the same old data.
I tried to force the cache not be used too, with: In the bootstrap-table
data-cache="false"
Or from controller
[ResponseCache(NoStore = true)]
Getting crazy, honestly.
<table id="tbl" class="table table-bordered table-striped table-hover"
data-locale="es-ES"
data-toolbar="#toolbar"
data-toggle="table"
data-search="false"
data-show-refresh="true"
data-show-toggle="true"
data-show-fullscreen="true"
data-show-columns="true"
data-show-columns-toggle-all="true"
data-detail-view="false"
data-show-export="true"
data-export-types="['json', 'xml', 'csv' , 'txt' , 'sql', 'xlsx' , 'pdf' ]"
data-export-data-type="all"
data-click-to-select="false"
data-minimum-count-columns="2"
data-show-pagination-switch="false"
data-pagination="true"
data-side-pagination="client"
data-page-list="[10, 25, 50, 100, all]"
data-show-footer="true"
data-filter-control="true"
data-show-search-clear-button="true"
data-url="/Home/Method">
<thead style="background-color: rgba(200, 200, 200, 0.8);">
<tr>
<th data-field="property1" data-sortable="true" data-switchable="false" data-filter-control="input">property1</th>
<th data-field="property2" data-sortable="true" data-switchable="false" data-filter-control="input">property2</th>
</tr>
</thead>
<tbody id="tbl_bod" style="background-color: rgba(255, 255, 255, 0.8);">
@if (Model != null && Model.items != null)
{
@foreach (Class1 obj in Model.items)
{
<tr>
<td>@obj.property1</td>
<td>@obj.property2</td>
</tr>
}
}
</tbody>
</table>
Besides, I realized that the error still happens in another browser or using incognito mode.
I added in the MVC controller of NET 8, these Headers to avoid using cache. Not working as well.
Response.Headers["Cache-Control"] = "no-cache, no-store, must-revalidate";
Response.Headers["Pragma"] = "no-cache";
Response.Headers["Expires"] = "0";
Any idea? Do you know what could be happen? Many Thanks
Well, I finally solved it this way. Which for me is a quite acceptable solution for my needs. I hope it helps you, or gives you something to start with.
I do not refresh using the integrated option of the boostrap table, but I have created a custom button that makes an ajax call and brings a json with the data.
I have had problems with some table configuration parameters, as well as clearing and adding the row to the table. Finally I have applied a destroy and an empty, to finally load the options of the table that I have previously saved.
<div id="toolbar">
<button type="button" class="btn btn-primary-custom" id="refrescar-tabla"><i class="fa fa-sync"></i></button>
</div>
<table id="tbl" class="table table-bordered table-striped table-hover"
data-toolbar="#toolbar"
data-toggle="table"
data-show-toggle="true"
data-show-fullscreen="true"
data-show-columns="true"
data-show-columns-toggle-all="true"
data-detail-view="false"
data-show-export="true"
data-export-types="['json', 'xml', 'csv' , 'txt' , 'sql', 'xlsx' , 'pdf' ]"
data-export-data-type="all"
data-click-to-select="false"
data-minimum-count-columns="2"
data-show-pagination-switch="false"
data-pagination="true"
data-side-pagination="client"
data-page-list="[10, 25, 50, 100, all]"
data-show-footer="true"
data-filter-control="true"
data-cache="false"
data-show-search-clear-button="true">
<thead style="background-color: rgba(200, 200, 200, 0.8);">
<tr>
<th data-field="property1" data-sortable="true" data-switchable="false" data-filter-control="input">property1</th>
<th data-field="property2" data-sortable="true" data-switchable="false" data-filter-control="input">property2</th>
</tr>
</thead>
<tbody id="tbl_bod" style="background-color: rgba(255, 255, 255, 0.8);">
@if (Model != null && Model.items != null)
{
@foreach (Class1 obj in Model.items)
{
<tr>
<td>@obj.property1</td>
<td>@obj.property2</td>
</tr>
}
}
</tbody>
</table>
const table = $('#tbl');
var tableOptions = $('#tbl').bootstrapTable('getOptions');
$.ajax({
url: '/Home/Refresh',
method: 'GET',
data: {},
dataType: 'json',
cache: false,
success: function (data) {
table.bootstrapTable('destroy');
$('#tbl_bod').empty();
$.each(data, function (index, element) {
var row = $('<tr>');
row.append($('<td>').text(element.property1));
row.append($('<td>').text(element.property2));
$('#tbl_bod').append(row);
});
$('#tbl').bootstrapTable(tableOptions);
},
error: function (error) {
}
});