I checked your example, and it's working in your example, but when I tried it in my example, it doesn't work. I don't know where I am making mistakes. Is it that I am using old jQuery files? I am posting the whole HTML code here.
HTML CODE
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Refresh method with new url</title>
<meta charset="utf-8">
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-table.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-table.js"></script>
</head>
<body>
<div class="container">
<div class="ribbon">
<a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/409.html">View Source on GitHub</a>
</div>
<h1>Refresh method with new url(<a href="https://github.com/wenzhixin/bootstrap-table/issues/409">#409</a>).</h1>
<div class="toolbar">
<button id="refresh" class="btn btn-default">Refresh</button>
</div>
<table id="table"
data-toggle="table"
data-toolbar=".toolbar"
data-url='/Report/GetShipments'>
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
</div>
<script>
var $table = $('#table');
$(function () {
$('#refresh').click(function () {
$table.bootstrapTable('refresh', {
url: '/Report/ShowShipment'
});
});
});
</script>
</body>
</html>
Controller code.
public class ReportController : Controller
{
// GET: Report
public ActionResult Index()
{
return View();
}
public ActionResult GetShipments()
{
//IShipments shipments = new ShipmentsClient();
//var data = shipments.GetShipments(string.Empty, string.Empty, string.Empty, string.Empty);
//return Json(data, JsonRequestBehavior.AllowGet);
return Json("test" , JsonRequestBehavior.AllowGet);
//return new Json()
}
public ActionResult ShowShipment()
{
//IShipments shipments = new ShipmentsClient();
//var data = shipments.GetShipments(string.Empty, string.Empty, string.Empty, string.Empty);
//return Json(data, JsonRequestBehavior.AllowGet);
return Json("test", JsonRequestBehavior.AllowGet);
//return new Json()
}
public ActionResult Test()
{
return View();
}
}
When the page loads and hits the GetShipment()
method in the controller, and then we click the refresh button, it should hit the ShowShipment()
method, but unfortunately it always hits the GetShipment()
method. I don't know what mistake I am making.
You can use refresh method:
$table.bootstrapTable('refresh', {
url: 'new url'
});
I have added a example here: http://issues.wenzhixin.net.cn/bootstrap-table/#issues/409.html
The documentation: http://bootstrap-table.wenzhixin.net.cn/documentation/#methods
Hope to help you.
The best way to set/change data-url of bootstrap table is to use refresh method together with refreshOptions:
$table.bootstrapTable('refreshOptions', {url: 'new url'});
$table.bootstrapTable('refresh', {url: 'new url'});
If you don't do refreshOptions then BootstrapTable still will use Old url for next refreshes. For example for pagination/sorting/search when server-side enabled.
If you need to add loader icon, then you should add before calling refresh method, and delete loader icon with onLoadSuccess, onLoadError events.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With