显示加载图像效果不佳

约翰·彼得

我已定义以下脚本作为实现分页的一部分:

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

在数据检索期间不会显示隐藏的加载图像,有人可以对此问题提出建议吗?

尼兹姆

试试这些

  • 您可以在浏览器中加载图像(例如,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;
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章