无法在 Bootstrap 表中使用 jQuery 设置数据 url 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27841610/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unable to set data-url value using jQuery in Bootstrap table
提问by Awadhendra
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.
我检查了你的例子，它在你的例子中工作，但是当我在我的例子中尝试它时，它不起作用。我不知道我哪里出错了。是不是我在使用旧的 jQuery 文件？我在这里发布整个 HTML 代码。
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.
当页面加载并点击GetShipment()控制器中的方法，然后我们点击刷新按钮时，应该会点击该ShowShipment()方法，但不幸的是它总是点击该GetShipment()方法。我不知道我在犯什么错误。
回答by wenyi
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
我这里加了一个例子：http: //issues.wenzhixin.net.cn/bootstrap-table/#issues/409.html
The documentation: http://bootstrap-table.wenzhixin.net.cn/documentation/#methods
文档：http: //bootstrap-table.wenzhixin.net.cn/documentation/#methods
Hope to help you.
希望能帮到你。
回答by Артур Курицын
The best way to set/change data-url of bootstrap table is to use refresh method together with refreshOptions:
设置/更改引导表的 data-url 的最佳方法是将 refresh 方法与 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.
如果您不执行 refreshOptions，则 BootstrapTable 仍将使用旧 url 进行下一次刷新。例如，启用服务器端时的分页/排序/搜索。
If you need to add loader icon, then you should add before calling refresh method, and delete loader icon with onLoadSuccess, onLoadError events.
如果需要添加加载器图标，则应在调用refresh方法之前添加，并使用onLoadSuccess、onLoadError事件删除加载器图标。
回答by Lanfeust
I think you're looking for the data function http://api.jquery.com/data/
我认为您正在寻找数据函数 http://api.jquery.com/data/
$('#mytable').data('url', 'yoururl')
$('#mytable').data('url', 'yoururl')
Edit :
编辑 ：
Well I took a closer look :
好吧，我仔细看看：
- You have two include of bootstrap-table.css
- Bootstrap files aren't included as well as jQuery, are they included elsewhere ?
- Do you get errors in the javascript console ?
- 你有两个包含 bootstrap-table.css
- Bootstrap 文件不像 jQuery 那样包含在内，它们是否包含在其他地方？
- 您是否在 javascript 控制台中收到错误消息？
Got that working :
得到了工作：
<html>
<head>
</head>
<body>
<style type="text/css">
.the-legend {
border-style: none;
border-width: 0;
font-size: 14px;
line-height: 20px;
margin-bottom: 0;
}
.the-fieldset {
border: 2px groove threedface #444;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
</style>
<div class='form-horizontal well'>
<fieldset class="well the-fieldset">
<legend class="the-legend"><span class="h3">Shipment Filter Criteria</span></legend>
<div class='row'>
<div class='col-sm-3'>
<div class='form-group'>
<label for="user_locale">Carrier</label>
<select class="form-control" style="width:200px;" id="user_locale" name="user[locale]">
<option value="None" selected="selected">Select Carrier Type</option>
<option value="UPS">UPS</option>
<option value="USPS">USPS</option>
<option value="FEDEX">FEDEX</option>
</select>
</div>
</div>
<div class='col-sm-3'>
<div class='form-group'>
<label for="user_locale">Package Type</label>
<select class="form-control" style="width:200px;" id="user_locale" name="user[locale]">
<option value="None" selected="selected">Select Package Type</option>
<option value="UPS">UPS</option>
<option value="USPS">USPS</option>
<option value="FEDEX">FEDEX</option>
</select>
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-3'>
<div class='form-group'>
<label for="user_locale">Shipped Date</label>
<input class="form-control" style="width:200px;" data-provide="datepicker" id="shippedDate" />
</div>
</div>
<div class='col-sm-3'>
<div class='form-group'>
<label for="user_locale">Schedule Date</label>
<input class="form-control" style="width:200px;" data-provide="datepicker" id="scheduleDate" />
</div>
</div>
<div class='col-sm-6'>
<div>
<button style="width:150px;height:38px;margin-top:25px;" class="btn btn-primary"
onclick="getShipmens()">
View Report
</button>
</div>
</div>
</div>
</fieldset>
<div class="row">
<br />
<table id="table-javascript"></table>
<table id="mytable" data-url='@Url.Action("GetShipments", "Report", new { carrierType = "UPS", shippedDate = "01/12/14" , scheduleDate = "01/12/14" }, null)' data-toggle="table">
<thead>
<tr>
<th data-field="Id" data-sortable="True">Id</th>
<th data-field="TrackingNr" data-sortable="True">Tracking Nr</th>
<th data-field="Carrier" data-sortable="True">Carrier</th>
<th data-field="PackageType" data-sortable="True">Package Type</th>
<th data-field="ShippedDate" data-sortable="True">Shipped Date</th>
<th data-field="ScheduledDate" data-sortable="True">Scheduled Date</th>
<th data-field="ActivityZip" data-sortable="True">Activity Zip</th>
<th data-field="ActivityState" data-sortable="True">Activity State</th>
</tr>
</thead>
</table>
</div>
<script src="./Scripts/jquery.min.js"></script>
<script src="./Scripts/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="./Content/bootstrap-table.min.css">
<script src="./Scripts/bootstrap.min.js"></script>
<link rel="stylesheet" href="./Content/bootstrap.min.css">
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('#shippedDate').datepicker({
format: "dd/mm/yyyy"
});
$('#scheduleDate').datepicker({
format: "dd/mm/yyyy"
});
});
function getShipmens() {
alert($('#mytable').data('url'));
$('#mytable').data('url', '@Url.Action("GetShipments", "Report")');
alert($('#mytable').data('url'));
$('#mytable').bootstrapTable('refresh');
}
</script>
</div>
</body>
</html>
