Question

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

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

在数据检索过程中不会显示隐藏的加载图像，有人可以就此问题提出建议吗？

Answer 1

试试这些

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

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

显示加载图像效果不佳

1 个答案: