Jquery配合ajax进行调用webservice分页(Asp.net)

关键词:

html代码


       <div class="bar">
           <%--导航分页--%>
           <div id="myPager" class="pager"></div>
       </div>
       <div id="tabs">
           <ul id="tabContainer">
           </ul>
       </div>
js代码



<script>

           var myPager = $('#myPager');
           var blogCount = 30;//获取总共的页数
           var currentPage = 1;//当前页码
           var perPageNum = 10;
           var showRange = 4;//显示页码宽度(*2)
           var m = 0;
           var n = 10;
           var currentPageArray;
           var sql = "";
           var sql_search = "";
           $(function () {
               //添加分类选项卡
               var tabContainer = $("#tabContainer");
               var topic_index = 0;
               currentPageArray = new Array(topics.length);
               $.each(topics, function GenerateItem(key, value) {
                   if (key>=20) {
                       return false;//等同于break
                   }
                   var list = $("<li>");
                   var lnk = $("<a href='#tabs-" + key + "'>" + value.name + "</a>");
                   lnk.click(function switchTopic() {
                       //如果存储了之前页码,找回
                       if (currentPageArray[key] != null) {
                           currentPage = currentPageArray[key];
                       }
                       else {
                           currentPage = 1;
                       }
                       if (value.name != "综合") {
                           sql_search = "select * FROM [blog] WHERE [topic] like '%" + value.name + "%' OR [blogTitle] like '%" + value.name + "%'";
                       }
                       else {
                           sql_search = "select * FROM [blog]";
                       }
                       blogCount = getPageCount(sql_search);
                       freshPager(key, value.name);//填充页码
                       loadBlog('tabs-' + key, sql);
                       $("#tabs-" + key).sortable();
                       $("#tabs-" + key).disableSelection();
                   });
                   list.append(lnk);
                   tabContainer.append(list);
                   var tabDiv = $("<div id='tabs-" + key + "'>");
                   $("#tabs").append(tabDiv);
               })
               $("#tabs").tabs();//jquery UI 选项卡
               //初始化加载综合列表
               sql = "SELECT top 10 * FROM[blog] ORDER BY[BlogTime] DESC, [ID]";
               blogCount = getPageCount("select * FROM [blog]");
               loadBlog("tabs-0", sql);
               freshPager(0, "综合");//获取总数填充页码
               //综合页面的jquery-Ui
               $("#tabs-0").sortable();
               $("#tabs-0").disableSelection();
           });
           function getPageCount(sqlPara) {
               var count = blogCount;
               $.ajax({
                   url: "blog/Blogs.asmx/GetCount", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
                   ContentType: "application/json;charset=utf-8", //WebService 会返回Json类型
                   dataType: "json",
                   type: "Post",   //访问WebService使用Post方式请求
                   data: "{searchCmd:\"" + sqlPara + "\"}",         //这里是要传递的参数,格式为 data: "{paraName:paraValue}",下面将会看到      
                   beforeSend: function (x) {
                       x.setRequestHeader("Content-Type", "application/json; charset=utf-8");
                   },
                   success: function (result) {//回调函数,result,返回值
                       count = result.d;
                   },
                   error: function (XMLHttpRequest, textStatus, errorThrown) {
                       $("<div title='getPageCount出错'>").text(XMLHttpRequest.responseText + '获取页码总量失败').dialog();
                   },
                   async: false,
               });
               return count;
           }

           //共用一套页码key=tab编号,value=关键词
           function freshPager(key, value) {
               var pageNum = Math.ceil(blogCount / perPageNum);//分页页码数
               var startNum = currentPage - showRange;//开始页码
               var endNum = currentPage + showRange;//结束页码
               //开始页面小于1
               if (startNum - showRange < 1) {
                   startNum = 1;
                   endNum = 1 + showRange * 2;
                   //结束页 不能大于总数
                   if (endNum > pageNum) {
                       endNum = pageNum
                   }
               }
               //最后一页页面大于总页数
               if (endNum > pageNum) {
                   endNum = pageNum;
                   startNum = endNum - showRange * 2;
                   //开始页面 不能小于1
                   if (startNum < 0) { startNum = 1; }
               }
               m = (currentPage - 1) * perPageNum;//起始位置
               n = m + perPageNum;//终止位置
               //根据关键词组合sql
               if (value == "综合" || value == null) {
                   //alert(blogCount+"frehpager");
                   sql = "select top 10 * from (select top " + (blogCount - m) + " * from [blog] ORDER BY [BlogTime], [ID]) order by [BlogTime] DESC";
               }
               else {
                   sql = "select top 10 * from (select top " + (blogCount - m) + " * from [blog] WHERE [topic] like '%" + value + "%' OR [blogTitle] like '%" + value + "%' ORDER BY [BlogTime], [ID]) order by [BlogTime] DESC";
               }
               $('.pagerLnk').remove();//移除旧页码
               var firstpage = $("<a class='pagerLnk' href=#" + 0 + ">").text('←');
               firstpage.click(function loadfirst() {
                   currentPage = 1;
                   freshPager(0, "综合");
                   //loadBlog(0, "SELECT top 10 * FROM [blog] ORDER BY [BlogTime] DESC, [ID]");
               });

               myPager.append(firstpage);//添加新页码
               for (var i = startNum; i <= endNum; i++) {
                   var page = $("<a class='pagerLnk' href=#" + i + ">").text(i);
                   page.click(function getBlogItem() {
                       currentPage = parseInt(this.textContent)
                       m = (currentPage - 1) * perPageNum;//起始位置
                       n = m + perPageNum;//终止位置
                       if (value == "综合" || value == null) {
                           sql = "select top 10 * from (select top " + (blogCount - m) + " * from [blog] ORDER BY [BlogTime], [ID]) order by [BlogTime] DESC";
                       }
                       else {
                           sql = "select top 10 * from (select top " + (blogCount - m) + " * from [blog] WHERE [topic] like '%" + value + "%' OR [blogTitle] like '%" + value + "%' ORDER BY [BlogTime], [ID]) order by [BlogTime] DESC";
                       }
                       freshPager(key, value);
                       loadBlog("tabs-" + key, sql);
                   });

                   myPager.append(page);//添加新页码
               }

               var lastpage = $("<a class='pagerLnk' href=#" + pageNum + ">").text('→');
               lastpage.click(function loadLast() {
                   currentPage = pageNum;
                   freshPager(key, value);
               });
               myPager.append(lastpage);//添加新页码
           }  //id=tab编号,sql=选择10个

           function loadBlog(id, sql) {
               var field = $('#' + id);
               //清除现有item//
               field.empty(); //field.remove('.blogCard');
               $.ajax({
                   url: "blog/Blogs.asmx/GetBlogs", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
                   ContentType: "application/json;charset=utf-8", //WebService 会返回Json类型
                   dataType: "json",
                   type: "Post",   //访问WebService使用Post方式请求
                   data: "{searchCmd:\"" + sql + "\"}",         //这里是要传递的参数
                   beforeSend: function (x) {
                       x.setRequestHeader("Content-Type", "application/json; charset=utf-8");
                   },
                   success: function (result) {//回调函数,result,返回值
                       var blogs = result.d;
                       $.each(blogs, function GenerateItem(key, value) {
                           //先建立h2
                           var h2 = $("<h2>");
                           //先建立a
                           var link = $("<a href=" + value.BlogUrl + ">" + value.BlogTitle + "</a>");
                           h2.append(link);
                           var imgListContainer = $("<div>");
                           imgListContainer.css("margin-top", "10px");
                           imgListContainer.css("width", "100%");
                           imgListContainer.css("overflow", "hidden");
                           var imgUrlList = value.BlogImage.split(',');
                           for (var i = 0; i < imgUrlList.length; i++) {
                               if (i >= 3) {
                                   break;
                               }
                               var imgurl = imgUrlList[i];
                               //如果图片使用了相对地址转换为绝对地址
                               if (imgUrlList[i].indexOf("editor/attached/") > 0) {
                                   if (imgUrlList[i].indexOf("songshizhao.com") < 0) {
                                       imgurl = "http://www.songshizhao.com" + imgUrlList[i];

                                   }

                               }
                               var img = $("<img class='title-img' src=" + imgurl + " />");
                               //建立一个图片容器,将图片填入(同时使用JQ UI的 sizalbe)
                               var imgContainer = $("<div class='ui-widget-content imgContainer'>").resizable().append(img);
                               //如果图片加载出错
                               img.error(function hide() {
                                   imgContainer.remove();//如果加载图片出错,则取消显示图片容器和图片

                               });
                               imgListContainer.append(imgContainer);
                           }
                           //a和imglist加入h2中                        
                           //h2.append(imgListContainer);
                           //h2加入li中
                           var list = $("<li class='blogCard'></li>");
                           list.append(h2);
                           list.append(imgListContainer);
                           //
                           var authorInfo = $("<div class='author'></div>");
                           //将data(number)时间格式改为yy-mm-dd
                           var date = new Date(parseInt(value.BlogTime.replace("/Date(", "").replace(")/", ""), 10));
                           var year = date.getFullYear();
                           var month = date.getMonth() + 1;
                           var day = date.getDate();
                           var ymd = year + '-' + month + '-' + day;
                           authorInfo.append("作者:" + value.BlogAuthor + "&nbsp; 时间:" + ymd + "&nbsp; <i class='demo-icon icon-eye'>&#xe814;</i>" + value.BlogStatis + "");
                           list.append(authorInfo);

                           field.append(list);

                       })

                   },

                   error: function (XMLHttpRequest, textStatus, errorThrown) {

                       $("<div title='loadBlog出错'>").text(sql + XMLHttpRequest.responseText).dialog();

                   }

               });
           }

       </script>





作者:songshizhao 发表于:2018-03-08T08:32:06 访问量:226
评论 [发表评论]