0

我已将以下脚本定义为实现分页的一部分：-

    var getPage = function () {
        var $a = $(this);
        var options = {
            url: $a.attr("href"),
            data: $("form").serialize(),
            type: "get"
        };
        $.ajax(options).done(function (data) {
            $(".loadingimage").show();
            var target = $a.parents("div.pagedList").attr("data-tms-target");
            $(target).replaceWith(data);
        });
        return false;
    };


$(document).ready(function () {

    $(".main-content").on("click", ".pagedList a", getPage);


})

部分加价如下：-

<div id="AuditTable">
<div class="pagedList" data-tms-target="#AuditTable">
                        @Html.PagedListPager(Model , page => Url.Action("Index",new { page }),
                        PagedListRenderOptions.ClassicPlusFirstAndLast)

</div>  <img src="~/Content/Ajax-loader-bar.gif" class="loadingimage" id="progress2" />
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead><tr>

分页可以正常工作，但问题是

$(".loadingimage").show();

在数据检索期间不会显示隐藏的加载图像，有人可以就这个问题提出建议吗？

4

1 回答 1

1

试试这些

  • 您可以在浏览器中加载图像（例如http://yourdomain.com/Content/Ajax-loader-bar.gif）如果可以，考虑将完整的 url 写入图像 src。
  • 尝试 id 作为选择器（例如$("#progress2).show();）
  • 如果这些没有将您带到任何可以将图像放入 div 的位置，则删除其类（假设您使用 css 将其隐藏），.show();并.hide();在 getPage 函数中。

HTML：

<div id="loadcontainer"><img src="Content/Ajax-loader-bar.gif" id="progress2" /></div>

Javascript：

var getPage = function () {
  $("#loadcontainer").show();
  var $a = $(this);
  var options = {
      url: $a.attr("href"),
      data: $("form").serialize(),
      type: "get"
  };
  $.ajax(options).done(function (data) {
      $("#loadcontainer").hide();
      var target = $a.parents("div.pagedList").attr("data-tms-target");
      $(target).replaceWith(data);
  });
  return false;
};
于 2013-07-15T10:14:50.533 回答