无法使用 Bootstrap table 中的 jQuery 设置数据 url 值

Question

我检查了你的例子，它在你的例子中工作，但是当我在我的例子中尝试它时，它不起作用。我不知道我在哪里犯了错误。是不是我使用的是旧的 jQuery 文件？我在这里发布整个 HTML 代码。

HTML 代码

@{
    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>

控制器代码。

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();
        }

    }

当页面加载并命中controller中的GetShipment()方法，然后我们点击刷新按钮，应该会命中ShowShipment()方法，可惜总是命中[=5] =] 方法。我不知道我犯了什么错误。

Answer 1

我想你正在寻找数据函数 http://api.jquery.com/data/

$('#mytable').data('url', 'yoururl')

编辑：

好吧我仔细看了看:

您有两个包含 bootstrap-table.css
Bootstrap 文件没有像 jQuery 那样包含，它们是否包含在其他地方？
您在 javascript 控制台中收到错误消息吗？

成功了：

<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>

Answer 2

您可以使用刷新方法：

$table.bootstrapTable('refresh', {
    url: 'new url'
});

我在这里添加了一个例子：http://issues.wenzhixin.net.cn/bootstrap-table/#issues/409.html

文档：http://bootstrap-table.wenzhixin.net.cn/documentation/#methods

希望能帮到你。

Answer 3

set/change data-url of bootstrap table 的最佳方法是将刷新方法与 refreshOptions 一起使用：

$table.bootstrapTable('refreshOptions', {url: 'new url'});
$table.bootstrapTable('refresh', {url: 'new url'});

如果您不执行 refreshOptions，那么 BootstrapTable 仍将使用 Old url 进行下一次刷新。例如，当服务器端启用时 pagination/sorting/search。

如果需要添加loader图标，则在调用refresh方法之前添加，并通过onLoadSuccess、onLoadError事件删除loader图标。

无法使用 Bootstrap table 中的 jQuery 设置数据 url 值

Unable to set data-url value using jQuery in Bootstrap table

html

asp.net

asp.net-mvc

jquery

twitter-bootstrap