菜单

关于Ajax异步请求后台数据开展动态分页功能

2018年11月15日 - Ajax

ajax请求后台拿到json类型的多寡后,可以当其的success回调方法被开展动态分页,也就是是表格重绘,此时,我们需要取得的数包括:查询得到的数目、数据到底条数、总页数、当前页数,其中前面三长条可每当后台获取,对于目前页数,需要从前端获取点击页数再经过请传递让后台,后台做了相应处理后还传给前端。

创建WebPager类

请看如下例子:

 public static class WebPager
    {
        public static string WebPagerAjax(string Idn, bool IsShort)
        {
            string html = @"
                            <style type=""text/css"">.pgE{color:#FF9A2A;cursor:pointer;}.pgD{color:gray;}</style>
                            <script type=""text/javascript"" language=""javascript"">
                            var pgTotal$Idn$Page$Idn$;
                            function pgSetPaged$Idn$(pgi) {

                                pgTotal$Idn$Page$Idn$ = 0; 
                                var pageIndex = 0; var totalCount =0;var pageSize = 0;
                                var isFirst = true; var isLast = true;
                                if(pgi!=null)
                                {
                                    pgTotal$Idn$Page$Idn$ = pgi.TotalPage;
                                    pageIndex = pgi.PageIndex;
                                    if(pageIndex==0 && pgTotal$Idn$Page$Idn$>0)
                                    {
                                        pageIndex=1;
                                    }                                     
                                    totalCount =pgi.TotalCount;
                                    pageSize = pgi.PageSize;                             
                                    isFirst = pgi.IsFirstPage;
                                    isLast = pgi.IsLastPage;
                                }
                                $(""#pgTotal$Idn$"").html(pgTotal$Idn$Page$Idn$);
                                $(""#pgIndex$Idn$"").html(pageIndex);
                                $(""#pgTotal$Idn$Count"").html(totalCount);
                                //$(""#pgSize"").html(pageSize);
                                $(""#pgGo$Idn$Index$Idn$"").val(pageIndex);
                                $(""#pgFirst$Idn$"").removeClass(""pgE"");
                                $(""#pgPrevious$Idn$"").removeClass(""pgE"");
                                $(""#pgLast$Idn$"").removeClass(""pgE"");
                                $(""#pgNext$Idn$"").removeClass(""pgE"");
                                $(""#pgFirst$Idn$"").removeClass(""pgD"");
                                $(""#pgPrevious$Idn$"").removeClass(""pgD"");
                                $(""#pgLast$Idn$"").removeClass(""pgD"");
                                $(""#pgNext$Idn$"").removeClass(""pgD"");
                                var psize = pageSize;
                                if (isFirst) {
                                    $(""#pgFirst$Idn$"").addClass(""pgD"");
                                    $(""#pgPrevious$Idn$"").addClass(""pgD"");
                                    $(""#pgFirst$Idn$"").unbind();
                                    $(""#pgPrevious$Idn$"").unbind();
                                }
                                else {
                                    $(""#pgFirst$Idn$"").unbind();
                                    $(""#pgPrevious$Idn$"").unbind();
                                    $(""#pgFirst$Idn$"").addClass(""pgE"");
                                    $(""#pgPrevious$Idn$"").addClass(""pgE"");
                                    $(""#pgFirst$Idn$"").bind(""click"", { pageIndex: 1, pageSize: psize }, pgChangeIndex);
                                    var ind = pageIndex - 1;
                                    if (ind < 1) ind = 1;
                                    $(""#pgPrevious$Idn$"").bind(""click"", { pageIndex: ind, pageSize: psize }, pgChangeIndex);
                                }
                                if (isLast) {
                                    $(""#pgLast$Idn$"").addClass(""pgD"");
                                    $(""#pgNext$Idn$"").addClass(""pgD"");
                                    $(""#pgLast$Idn$"").unbind();
                                    $(""#pgNext$Idn$"").unbind();
                                }
                                else {
                                    $(""#pgLast$Idn$"").unbind();
                                    $(""#pgNext$Idn$"").unbind();
                                    $(""#pgLast$Idn$"").addClass(""pgE"");
                                    $(""#pgNext$Idn$"").addClass(""pgE"");     
                                    ind = pageIndex + 1;
                                    if (ind > pgTotal$Idn$Page$Idn$) ind = pgTotal$Idn$Page$Idn$;
                                    $(""#pgNext$Idn$"").bind(""click"", { pageIndex: ind, pageSize: psize }, pgChangeIndex);
                                    $(""#pgLast$Idn$"").bind(""click"", { pageIndex: pgTotal$Idn$Page$Idn$, pageSize: psize }, pgChangeIndex);
                                }    
$(""#pgGo$Idn$"").unbind(""click"");
                                $(""#pgGo$Idn$"").bind(""click"", {  pageSize: psize }, pgGo$Idn$);
                            }

                            function pgGo$Idn$(event) {
                                var ind = $(""#pgGo$Idn$Index$Idn$"").val();
                                if(ind > pgTotal$Idn$Page$Idn$) ind = pgTotal$Idn$Page$Idn$;
                                if(ind < 1) ind = 1;
                                pgLoadData$Idn$(ind, event.data.pageSize); 
                            }
                            function pgChangeIndex(event) {
                                pgLoadData$Idn$(event.data.pageIndex, event.data.pageSize);
                            }</script>
                            <div style=""text-align:left"">";

            if (IsShort)
                html += @"页次:/
                            第一页
                            上页
                            下页
                            最后页";
            else
                html += @"第/页
                            总条
                            第一页
                            上页
                            下页
                            最后页
                            跳转<input id=""pgGo$Idn$Index$Idn$"" size=""1"" maxlength=""8"" style=""width:40px;""
                            onkeyup=""value=value.replace(/[^\d]/g,'')"" onbeforepaste=""clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"" class=""input-text size-MINI""/>
                            <button id=""pgGo$Idn$"" type=""button"" class=""btn btn-secondary size-MINI radius"" >Go</button>";

            html += "</div>";
            //Js中 pgLoadData$Idn$ 为期望方法
            return html.Replace("$Idn$", Idn);
        }

        /// <summary>
        /// 呈现分页控制器,基于Ajax JSON数据,需要前端编写 pgLoadData 方法
        /// OA专用
        /// </summary>
        /// <remarks>
        /// 使用本方法的步骤
        /// 1.调用 pgSetPaged(pgi) 设置分页数据 pgi 为 PagedInfo JSON 格式
        /// 2.编写 function pgLoadData(ind, size) {} JavaScript方法处理分页数据获取
        /// </remarks>
        /// <returns>生成html分页UI的字符串</returns>
        public static string WebPagerAjax(bool IsShort)
        {
            string html = @"
                            <style type=""text/css"">.pgE{color:#FF9A2A;cursor:pointer;}.pgD{color:gray;}</style>
                            <script type=""text/javascript"" language=""javascript"">
                            var pgTotalPage;
                            function pgSetPaged(pgi) {
                                pgTotalPage = 0;
                                var pageIndex = 0; var totalCount =0;var pageSize = 0;
                                var isFirst = true; var isLast = true;
                                if(pgi!=null)
                                {
                                    pgTotalPage = pgi.TotalPage;
                                    pageIndex = pgi.PageIndex;
                                    if(pageIndex==0 && pgTotalPage>0)
                                    {
                                        pageIndex=1;
                                    }
                                    totalCount =pgi.TotalCount;
                                    pageSize = pgi.PageSize;
                                    isFirst = pgi.IsFirstPage;
                                    isLast = pgi.IsLastPage;
                                }
                                $(""#pgTotal"").html(pgTotalPage);
                                $(""#pgIndex"").html(pageIndex);
                                $(""#pgTotalCount"").html(totalCount);
                                //$(""#pgSize"").html(pageSize);
                                $(""#pgGoIndex"").val(pageIndex);
                                $(""#pgFirst"").removeClass(""pgE"");
                                $(""#pgPrevious"").removeClass(""pgE"");
                                $(""#pgLast"").removeClass(""pgE"");
                                $(""#pgNext"").removeClass(""pgE"");
                                $(""#pgFirst"").removeClass(""pgD"");
                                $(""#pgPrevious"").removeClass(""pgD"");
                                $(""#pgLast"").removeClass(""pgD"");
                                $(""#pgNext"").removeClass(""pgD"");
                                var psize = pageSize;
                                if (isFirst) {
                                    $(""#pgFirst"").addClass(""pgD"");
                                    $(""#pgPrevious"").addClass(""pgD"");
                                    $(""#pgFirst"").unbind();
                                    $(""#pgPrevious"").unbind();
                                }
                                else {
                                    $(""#pgFirst"").unbind();
                                    $(""#pgPrevious"").unbind();
                                    $(""#pgFirst"").addClass(""pgE"");
                                    $(""#pgPrevious"").addClass(""pgE"");
                                    $(""#pgFirst"").bind(""click"", { pageIndex: 1, pageSize: psize }, pgChangeIndex);
                                    var ind = pageIndex - 1;
                                    if (ind < 1) ind = 1;
                                    $(""#pgPrevious"").bind(""click"", { pageIndex: ind, pageSize: psize }, pgChangeIndex);
                                }
                                if (isLast) {
                                    $(""#pgLast"").addClass(""pgD"");
                                    $(""#pgNext"").addClass(""pgD"");
                                    $(""#pgLast"").unbind();
                                    $(""#pgNext"").unbind();
                                }
                                else {
                                    $(""#pgLast"").unbind();
                                    $(""#pgNext"").unbind();
                                    $(""#pgLast"").addClass(""pgE"");
                                    $(""#pgNext"").addClass(""pgE"");     
                                    ind = pageIndex + 1;
                                    if (ind > pgTotalPage) ind = pgTotalPage;
                                    $(""#pgNext"").bind(""click"", { pageIndex: ind, pageSize: psize }, pgChangeIndex);
                                    $(""#pgLast"").bind(""click"", { pageIndex: pgTotalPage, pageSize: psize }, pgChangeIndex);
                                }    
$(""#pgGo"").unbind(""click"");
                                $(""#pgGo"").bind(""click"", {  pageSize: psize }, pgGo);
                            }

                            function pgGo(event) {
                                var ind = $(""#pgGoIndex"").val();
                                if(ind > pgTotalPage) ind = pgTotalPage;
                                if(ind < 1) ind = 1;
                                pgLoadData(ind, event.data.pageSize); 
                            }
                            function pgChangeIndex(event) {
                                pgLoadData(event.data.pageIndex, event.data.pageSize);
                            }</script>
                            <div style=""text-align:left;margin-top:2px;"">";

            if (IsShort)
                html += @"页次:/
                            第一页
                            上页
                            下页
                            最后页";
            else
                html += @"第/页
                            总条
                            第一页
                            上页
                            下页
                            最后页
                            跳转<input id=""pgGoIndex"" size=""1"" maxlength=""8"" style=""width:40px;""
                            onkeyup=""value=value.replace(/[^\d]/g,'')"" onbeforepaste=""clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"" class=""input-text size-MINI""/>
                            <button id=""pgGo"" type=""button"" class=""btn btn-secondary size-MINI radius"">Go</button>";

            html += "</div>";
            //Js中 pgLoadData 为期望方法
            return html;
        }




        /// <summary>
        /// 呈现分页控制器,基于Ajax JSON数据,需要前端编写 pgLoadData 方法
        /// 资产专用
        /// </summary>
        /// <remarks>
        /// 使用本方法的步骤
        /// 1.调用 pgSetPaged(pgi) 设置分页数据 pgi 为 PagedInfo JSON 格式
        /// 2.编写 function pgLoadData(ind, size) {} JavaScript方法处理分页数据获取
        /// </remarks>
        /// <returns>生成html分页UI的字符串</returns>
        public static string WebPagerAjax1(bool IsShort)
        {
            string html = @"
                            <style type=""text/css"">.pgE{color:#FF9A2A;cursor:pointer;}.pgD{color:gray;}</style>
                            <script type=""text/javascript"" language=""javascript"">
                            var pgTotalPage1;
                            function pgSetPaged1(pgi) {

                                pgTotalPage1 = 0; 
                                var pageIndex1 = 0; var totalCount1 =0;var pageSize1 = 0;
                                var isFirst1 = true; var isLast1 = true;
                                if(pgi!=null)
                                {
                                    pgTotalPage1 = pgi.TotalPage;
                                    pageIndex1 = pgi.PageIndex;
                                    if(pageIndex1==0 && pgTotalPage1>0)
                                    {
                                        pageIndex1=1;
                                    }                                     
                                    totalCount1 =pgi.TotalCount;
                                    pageSize1 = pgi.PageSize;                             
                                    isFirst1 = pgi.IsFirstPage;
                                    isLast1 = pgi.IsLastPage;
                                }
                                $(""#pgTotal1"").html(pgTotalPage1);
                                $(""#pgIndex1"").html(pageIndex1);
                                $(""#pgTotalCount1"").html(totalCount1);
                                //$(""#pgSize"").html(pageSize);
                                $(""#pgGoIndex1"").val(pageIndex1);
                                $(""#pgFirst1"").removeClass(""pgE"");
                                $(""#pgPrevious1"").removeClass(""pgE"");
                                $(""#pgLast1"").removeClass(""pgE"");
                                $(""#pgNext1"").removeClass(""pgE"");
                                $(""#pgFirst1"").removeClass(""pgD"");
                                $(""#pgPrevious1"").removeClass(""pgD"");
                                $(""#pgLast1"").removeClass(""pgD"");
                                $(""#pgNext1"").removeClass(""pgD"");
                                var psize = pageSize1;
                                if (isFirst1) {
                                    $(""#pgFirst1"").addClass(""pgD"");
                                    $(""#pgPrevious1"").addClass(""pgD"");
                                    $(""#pgFirst1"").unbind();
                                    $(""#pgPrevious1"").unbind();
                                }
                                else {
                                    $(""#pgFirst1"").unbind();
                                    $(""#pgPrevious1"").unbind();
                                    $(""#pgFirst1"").addClass(""pgE"");
                                    $(""#pgPrevious1"").addClass(""pgE"");
                                    $(""#pgFirst1"").bind(""click"", { pageIndex1: 1, pageSize1: psize }, pgChangeIndex);
                                    var ind = pageIndex1 - 1;
                                    if (ind < 1) ind = 1;
                                    $(""#pgPrevious1"").bind(""click"", { pageIndex1: ind, pageSiz1e: psize }, pgChangeIndex);
                                }
                                if (isLast1) {
                                    $(""#pgLast1"").addClass(""pgD"");
                                    $(""#pgNext1"").addClass(""pgD"");
                                    $(""#pgLast1"").unbind();
                                    $(""#pgNext1"").unbind();
                                }
                                else {
                                    $(""#pgLast1"").unbind();
                                    $(""#pgNext1"").unbind();
                                    $(""#pgLast1"").addClass(""pgE"");
                                    $(""#pgNext1"").addClass(""pgE"");     
                                    ind = pageIndex1 + 1;
                                    if (ind > pgTotalPage1) ind = pgTotalPage1;
                                    $(""#pgNext1"").bind(""click"", { pageIndex1: ind, pageSize1: psize }, pgChangeIndex);
                                    $(""#pgLast1"").bind(""click"", { pageIndex1: pgTotalPage1, pageSize1: psize }, pgChangeIndex);
                                }    
$(""#pgGo1"").unbind(""click"");
                                $(""#pgGo1"").bind(""click"", {  pageSize1: psize }, pgGo);
                            }

                            function pgGo(event) {
                                var ind = $(""#pgGoIndex1"").val();
                                if(ind > pgTotalPage1) ind = pgTotalPage1;
                                if(ind < 1) ind = 1;
                                pgLoadData(ind, event.data.pageSize); 
                            }
                            function pgChangeIndex(event) {
                                pgLoadData(event.data.pageIndex, event.data.pageSize);
                            }</script>
                            <div style=""text-align:left"">";

            if (IsShort)
                html += @"页次:/
                            第一页
                            上页
                            下页
                            最后页";
            else
                html += @"第/页
                            总条
                            第一页
                            上页
                            下页
                            最后页
                            跳转<input id=""pgGoIndex1"" size=""1"" maxlength=""8"" style=""width:40px;""
                            onkeyup=""value=value.replace(/[^\d]/g,'')"" onbeforepaste=""clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"" class=""input-text size-MINI""/>
                            <button id=""pgGo1"" type=""button"" class=""btn btn-secondary size-MINI radius"" >Go</button>";

            html += "</div>";
            //Js中 pgLoadData 为期望方法
            return html;
        }

        public static string WebPagerAjax()
        {
            string html = @"
                            <style type=""text/css"">.pgE{color:#FF9A2A;cursor:pointer;}.pgD{color:gray;}</style>
                            <script type=""text/javascript"" language=""javascript"">
                            var pgTotalPage;
                            function pgSetPaged(pgi,pgid) {

                                pgTotalPage = 0; 
                                var pageIndex = 0; var totalCount =0;var pageSize = 0;
                                var isFirst = true; var isLast = true;
                                if(pgi!=null)
                                {
                                    pgTotalPage = pgi.TotalPage;
                                    pageIndex = pgi.PageIndex;
                                    if(pageIndex==0 && pgTotalPage>0)
                                    {
                                        pageIndex=1;
                                    }                                     
                                    totalCount =pgi.TotalCount;
                                    pageSize = pgi.PageSize;                             
                                    isFirst = pgi.IsFirstPage;
                                    isLast = pgi.IsLastPage;
                                }
                                $(""#""+pgid+""pgTotal"").html(pgTotalPage);
                                $(""#""+pgid+""pgIndex"").html(pageIndex);
                                $(""#""+pgid+""pgTotalCount"").html(totalCount);
                                //$(""#""+pgid+""pgSize"").html(pageSize);
                                $(""#""+pgid+""pgGoIndex"").val(pageIndex);
                                $(""#""+pgid+""pgFirst"").removeClass(""pgE"");
                                $(""#""+pgid+""pgPrevious"").removeClass(""pgE"");
                                $(""#""+pgid+""pgLast"").removeClass(""pgE"");
                                $(""#""+pgid+""pgNext"").removeClass(""pgE"");
                                $(""#""+pgid+""pgFirst"").removeClass(""pgD"");
                                $(""#""+pgid+""pgPrevious"").removeClass(""pgD"");
                                $(""#""+pgid+""pgLast"").removeClass(""pgD"");
                                $(""#""+pgid+""pgNext"").removeClass(""pgD"");
                                var psize = pageSize;
                                var PageID=pgid;
                                if (isFirst) {
                                    $(""#""+pgid+""pgFirst"").addClass(""pgD"");
                                    $(""#""+pgid+""pgPrevious"").addClass(""pgD"");
                                    $(""#""+pgid+""pgFirst"").unbind();
                                    $(""#""+pgid+""pgPrevious"").unbind();
                                }
                                else {
                                    $(""#""+pgid+""pgFirst"").unbind();
                                    $(""#""+pgid+""pgPrevious"").unbind();
                                    $(""#""+pgid+""pgFirst"").addClass(""pgE"");
                                    $(""#""+pgid+""pgPrevious"").addClass(""pgE"");
                                    $(""#""+pgid+""pgFirst"").bind(""click"", { pageIndex: 1, pageSize: psize,pgid:PageID }, pgChangeIndex);
                                    var ind = pageIndex - 1;
                                    if (ind < 1) ind = 1;
                                    $(""#""+pgid+""pgPrevious"").bind(""click"", { pageIndex: ind, pageSize: psize,pgid:PageID }, pgChangeIndex);
                                }
                                if (isLast) {
                                    $(""#""+pgid+""pgLast"").addClass(""pgD"");
                                    $(""#""+pgid+""pgNext"").addClass(""pgD"");
                                    $(""#""+pgid+""pgLast"").unbind();
                                    $(""#""+pgid+""pgNext"").unbind();
                                }
                                else {
                                    $(""#""+pgid+""pgLast"").unbind();
                                    $(""#""+pgid+""pgNext"").unbind();
                                    $(""#""+pgid+""pgLast"").addClass(""pgE"");
                                    $(""#""+pgid+""pgNext"").addClass(""pgE"");     
                                    ind = pageIndex + 1;
                                    if (ind > pgTotalPage) ind = pgTotalPage;
                                    $(""#""+pgid+""pgNext"").bind(""click"", { pageIndex: ind, pageSize: psize,pgid:PageID }, pgChangeIndex);
                                    $(""#""+pgid+""pgLast"").bind(""click"", { pageIndex: pgTotalPage, pageSize: psize,pgid:PageID}, pgChangeIndex);
                                }    
$(""#""+pgid+""pgGo"").unbind(""click"");
                                $(""#""+pgid+""pgGo"").bind(""click"", {  pageSize: psize,pgid:PageID }, pgGo);
                            }

                            function pgGo(event) {
                                var ind = $(""#""+event.data.pgid+""pgGoIndex"").val();
                                if(ind > pgTotalPage) ind = pgTotalPage;
                                if(ind < 1) ind = 1;
                                pgLoadData(ind, event.data.pageSize,event.data.pgid); 
                            }
                            function pgChangeIndex(event) {
                                pgLoadData(event.data.pageIndex, event.data.pageSize,event.data.pgid);
                            }</script>";
            //Js中 pgLoadData 为期望方法
            return html;
        }

        public static string WebPagerhtml(bool IsShort, string PageID)
        {
            string html = @"<div id=" + PageID + @"_page style=""text-align:left"">";

            if (IsShort)
                html += @"页次:/
                            第一页
                            上页
                            下页
                            最后页";
            else
                html += @"第/页
                            总条
                            第一页
                            上页
                            下页
                            最后页
                            跳转<input id=""" + PageID + @"pgGoIndex"" size=""1"" maxlength=""8"" style=""width:40px;""
                            onkeyup=""value=value.replace(/[^\d]/g,'')"" onbeforepaste=""clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"" class=""input-text size-MINI""/>
                            <button id=""" + PageID + @"pgGo"" type=""button"" class=""btn btn-secondary size-MINI radius"" >Go</button>";

            html += "</div>";
            return html;
        }
    }
/**
   * 
   * @param page 当前页
   */
  function getData(page){
    var schoolid = $("#schoolid option:selected").text();
    var apptype = $("#apptype option:selected").text();
    var appname = $("#appname").val();
    $.ajax({
      type : "POST",
      url : "pageAjax",
      dataType : "json",
      data : {'schoolid':schoolid,'apptype':apptype,'page':page,'appname':appname},
      success : function(data){
         console.log("成功了!"+data);
         $("#table").html("");
         $(".turn_page").html("");
         var str = "<tr><th class='w20'>应用编号</th>"
              +"<th class='w15'>学校名称</th>"
              +"<th class='w30'>应用名称</th>"
              +"<th class='w25'>应用分类</th>"
              +"<th class='w10'>应用类型</th></tr>";
         for(var i=0;i<data.resultList.length;i++){
           str += "<tr onclick='showAppDetail(this);'><td>"+data.resultList[i].appid+"</td><td>"
           +data.resultList[i].schoolid+"</td><td>"+data.resultList[i].appname+"</td><td>"
           +data.resultList[i].app_departid+"</td><td>"+data.resultList[i].apptype+"</td></tr>";
         }
         $("#table").html(str);    //重绘table
         var pageNum = data.pageNum;  //获取得到的数据页数
         var curPage = data.curPage;  //获取当前页
         str = "";
         /*若页数大于1则添加上一页、下一页链接*/
         if(data.pageNum>1){
          str = "<ul><li><a href='javascript:void(0);onclick=preEvent();' id='pre' data-num='1'>上一页</a></li>" 
         }else{
           str = "<ul>";
         }
         /*循环输出每一页的链接*/
         for(var i=0;i<data.pageNum;i++){
           str += "<li><a href='javascript:void(0);onclick=getData("+(parseInt(i)+1)+");' data-type='num'>"+(parseInt(i)+1)+"</a></li>";
         }
         if(str.indexOf("上一页")>-1){
           str += "<li><a href='javascript:void(0);onclick=nextEvent();' id='next' data-num='1'>下一页</a></li>"
              +"共"+pageNum+"页</ul>";
         }else{
           str += "共"+pageNum+"页</ul>";
         }
         $(".turn_page").html(str);
     //把当前页码存到上一页、下一页的data-num属性中,这样可以在点击上一页或者下一页时知道应该跳到哪页
         $("#pre").attr("data-num",curPage);
         $("#next").attr("data-num",curPage);
      },
      error : function(data){
        alert("请求失败");
      }
    });
  }
/**
   * 上一页点击事件
   */
  function preEvent(){
    var curPage = $("#pre").attr("data-num");
    if(curPage<=1){
      $(this).attr('disabled',"true");
    }else{
      curPage = parseInt(curPage)-1;
      getData(curPage);
    }
  }
  /**
   * 下一页点击事件
   */
  function nextEvent(){
    var curPage = $("#next").attr("data-num");
    var pageNum = $("#pageNum").text();
    if(curPage>=pageNum){
      $(this).attr('disabled',"true");
    }else{
      curPage = parseInt(curPage)+1;
      getData(curPage);
    }
  }

补加填充table的js代码

对应的HTML代码

   //填充列表
   //imgPath:图片文件夹的路子
 
 //placeHold:占位符名|TypeName|是否使用unescape,例:\{SexID\}|Model.PubEnums.EnSex|0

<div class="table">
    <table id="table">
    </table>
</div>
<div class="turn_page">
</div>
function funFillTableByPage(imgPath, tableId, url, jsondata, trhtml, placeHold) {
    $("#" + tableId + " .listdata").remove();
    $("#" + tableId).append("<tr class='listdata'><td colspan='" + String($("#" + tableId + " tr:eq(0)").find("th").length) + "'><img src='" + imgPath + "onLoad.gif' align='absMiddle' /></td></tr>");
    var arrHold = placeHold.split(",");
    $.ajax({
        type: "post",
        url: url,
        dataType: "json",
        async: false,
        contentType: "application/json; charset=utf-8",
        data: jsondata,
        success: function (result, status) {
            if (result != undefined && result != null) {
                var ResultJson = result;
                if (ResultJson.ResultFlag == undefined) {
                    $("#" + tableId + " .listdata").remove();
                    alert(unescape(ResultJson.ResultMsg));
                    if (ResultJson.ResultCode == 3) {
                        window.top.location = "/Frame/Login";
                        return;
                    }
                }
                else {
                    if (ResultJson.ResultCode == 3) {
                        window.top.location = "/Frame/Login";
                        return;
                    }
                    if (ResultJson.ResultCode == 0) {
                        ResultJson = eval("("+ResultJson.ResultMsg+")");
                        if (ResultJson.PagedInfo.PageSize != 0 && ResultJson.PagedInfo.PageIndex != 0) {
                            _ind = ResultJson.PagedInfo.PageIndex;
                            pgSetPaged(ResultJson.PagedInfo, tableId);
                        }
                        else {
                            pgSetPaged(null, tableId);
                        }
                        var list = ResultJson.ListData;
                        $("#" + tableId + " .listdata").remove();
                        $.each(list, function (i) {
                            var item = list[i];
                            var row = trhtml;
                            for (var h = 0; h < arrHold.length; h++) {
                                if (arrHold[h] != null && arrHold[h] != "") {
                                    var sText = "";
                                    var arrHoldItem = arrHold[h].split("|");
                                    eval("sText = item." + arrHoldItem[0]);

                                    if (arrHoldItem.length == 3) {
                                        if (arrHoldItem[1] != null && arrHoldItem[1] != "") {
                                            eval("sText = funGetText('" + arrHoldItem[1] + "', \"" + sText + "\");");
                                        }

                                        if (arrHoldItem[2] != null && arrHoldItem[2] == "1") {
                                            eval("sText = unescape(sText);");
                                        }
                                        if (arrHoldItem[2] != null && arrHoldItem[2] == "2") {
                                            if (sText != null && sText != "" && sText.indexOf("1900-01-01") == -1) {
                                                var dt = new Date(sText.replace(/-/g, "/"));
                                                var month = dt.getMonth() + 1;
                                                sText = dt.getFullYear() + "-" + month + "-" + dt.getDate();
                                            }
                                            else {
                                                eval("sText = \"\";");
                                            }
                                        }
                                    }

                                    eval("row = row.replace(/\{" + arrHoldItem[0] + "\}/g, sText == null ? \"\" : unescape(sText))");
                                }
                            }

                            $("#" + tableId).append("<tr class='listdata'>" + row + "</tr>");
                        });
                    }
                }
            }
            $("#" + tableId + " tr:even").addClass("dgalt");
            $("#" + tableId + " tr:odd").addClass("dgitem");
        },
        error: function (error) {
            alert("调用出错:" + error.responseText);
        }
    });

}

注意:标签的href属性,如href=”javascript:void(0);onclick=getData();”

Html页面JS调用

如若给原的点击事件失去响应,重新被它们定义点击事件,要被它丰富javascript:void(0);马上词话,若写的凡href=”#”的言辞,点击默认会跳到页面顶部。

        // 每页分页显示数
        var _pgSizelist = 15;
        // 当前分页号
        var _pgIndex = 1;
        // 是否正在加载数据
        var IsPgLoad = false;
        // 加载列表数据
        function pgLoadData(pgIndex, pgSize) {
            // 判断是否正在加载数据 避免重复加载
            if (IsPgLoad) return;
            IsPgLoad = true;
            var jsondata = Getjsondata(pgIndex, pgSize);
            funFillTableByPage("../../Content/Image/", "list", "/Bus/GetList", jsondata,
                $("#list tr:eq(1)").html(), "ID,Name,Name,MeName,facturer,CylinderNum,CardStatus|CardStatus|0,Remarks,CylinderCode,VehicleNum,NextCheckDate||0,ScrapDate||0");
            IsPgLoad = false;
        }

此外,ajax请求数据无刷新翻页是异步请求,所以标签的点击事件使描绘以它的特性里,如上例,若写在js当中,会招致页面还尚未加载出来,事件便曾经触发,导致没有任何响应。

Html页面模板

总结

  <table id="list" class="dg">
        <tr>
            <th style="width: 30px;">
                <input type="checkbox" id="selAll" value="" onclick="javascript: funSelectAll();" />
            </th>
            <th style="width: 100px;">车牌号码
            </th>
            <th style="width: 100px;">气瓶编号
            </th>
            @*<th style="width: 250px;">所属公司
            </th>*@
            <th style="width: 80px;">气瓶型号
            </th>
            <th style="width: 100px;">充装介质
            </th>
            <th style="width: 230px;">生产厂家
            </th>
            <th style="width: 120px;">出厂编号
            </th>
            <th style="width: 80px;">下检日期
            </th>
            <th style="width: 80px;">报废日期
            </th>
            <th style="width: 80px;">发卡状态
            </th>
            <th>备注
            </th>
        </tr>
        <tr style="display: none;">
            <td>
                <input type="checkbox" id="chk{ID}" value="{ID}" /></td>
            <td><a href="javascript:ShowVehicleDetail(&quot;{Num}&quot;);">{Num}</a></td>
            <td><a href="javascript:ShowDetail(&quot;{CID}&quot;);">{CCode}</a></td>

            <td>{MName}</td>
            <td>{MeName}</td>
            <td title="{Manufacturer}">{Manufacturer}</td>
            <td>{CNum}</td>
            <td>{NextCheckDate}</td>
            <td>{ScrapDate}</td>
            <td>{CardStatus}</td>
            <td>{Remarks}</td>
        </tr>
        <tbody>
        </tbody>
    </table>
    <div>

            @Html.Raw(WebPager.WebPagerAjax("list", false))

    </div>

以上所述是稍稍编给大家介绍的关于Ajax异步请求后台数据开展动态分页功能,希望对大家所有帮助,如果大家产生其它问题请让自己留言,小编会及时恢复大家的。在此吧非常感谢大家对台本的家网站的支持!

 

公可能感兴趣之文章:

相关文章

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图