JQuery数据绑定：①列表绑定（续）

核心提示： Code //== //设置分页连接，只针对翻页的<a>做处理，JQuery数据绑定：①列表绑定（续）(3)， //== $.fn.setPageLink = function() { var id = this.attr("id"); $("tfoot

Code

　　　 //==========================================================================
　　　 //设置分页连接，只针对翻页的<a>做处理。
　　　 //==========================================================================
　　　 $.fn.setPageLink = function() {
　　　　　　　 var id = this.attr("id");
　　　　　　　 $("tfoot .pagelist a", this).unbind("click").click(function() {
　　　　　　　　　　　 var thisPageIndex = $(this).attr("href");
　　　　　　　　　　　 thisPageIndex = thisPageIndex.substring(thisPageIndex.lastIndexOf("#") + 1);
　　　　　　　　　　　 $("#" + id).bindTable({ pageindex: thisPageIndex, pageRequest: true });
　　　　　　　 });
　　　　　　　 return this;
　　　 };
　　　 //==========================================================================
　　　 //表格分页（这个程序的样式写的比较死，如果想要比较丰富的翻页样式，还要写一堆代码-_-）
　　　 //==========================================================================
　　　 $.fn.pageHtml = function(recordCount, pageSize, pageIndex) {

　　　　　　　 pageIndex = parseInt(pageIndex);
　　　　　　　 pageSize = parseInt(pageSize);
　　　　　　　 recordCount = parseInt(recordCount);

　　　　　　　 var pageCount = parseInt(recordCount / pageSize);

　　　　　　　 if (recordCount % pageSize > 0)
　　　　　　　　　　　 pageCount++;
　　　　　　　 if (pageIndex > pageCount)
　　　　　　　　　　　 pageIndex = pageCount;

　　　　　　　 if (pageCount <= 1) {
　　　　　　　　　　　 $(".pagelist", this).empty().hide();
　　　　　　　　　　　 return this;
　　　　　　　 }
　　　　　　　 var isShowCount = this.attr("isShowCount");
　　　　　　　 var isShowPageList = this.attr("isShowPageList");

　　　　　　　 var html = "<div class='pagelist'>";
　　　　　　　 if (isShowCount != "0") {
　　　　　　　　　　　 html += "<span>共" + recordCount + "条 第" + pageIndex + "页/共" + pageCount + "页,每页" + pageSize + "条</span>";
　　　　　　　 }

　　　　　　　 if (pageIndex == 1) {
　　　　　　　　　　　 html += "<span>首页</span>";
　　　　　　　　　　　 html += "<span>上一页</span>";
　　　　　　　 }
　　　　　　　 else {
　　　　　　　　　　　 html += "<a href=\"#1\">首页</a>";
　　　　　　　　　　　 html += "<a href=\"#" + (pageIndex - 1) + "\">上一页</a>";
　　　　　　　 }
　　　　　　　 if (isShowPageList != "0") {

　　　　　　　　　　　 var listSize = 5; //显示 1 2 3 4
　　　　　　　　　　　 var loopSize = 5; //循环上限
　　　　　　　　　　　 var listIndex = 0; //当前list的索引
　　　　　　　　　　　 if (pageIndex % listSize > 0)
　　　　　　　　　　　　　　　 listIndex = parseInt(pageIndex / listSize);
　　　　　　　　　　　 else
　　　　　　　　　　　　　　　 listIndex = parseInt(pageIndex / listSize) - 1;

　　　　　　　　　　　 if (listSize > pageCount)//总页数不到一个页码数
　　　　　　　　　　　　　　　 loopSize = pageCount;
　　　　　　　　　　　 else
　　　　　　　　　　　　　　　 loopSize = listSize;

　　　　　　　　　　　 //
　　　　　　　　　　　 if ((listIndex + 1) * listSize >= pageCount && listSize < pageCount) {
　　　　　　　　　　　　　　　 loopSize = pageCount % listSize;
　　　　　　　　　　　　　　　 if (loopSize == 0)
　　　　　　　　　　　　　　　　　　　 loopSize = listSize;
　　　　　　　　　　　 }

　　　　　　　　　　　 for (var i = 1; i <= loopSize; i++) {
　　　　　　　　　　　　　　　 var pageText = i + (listIndex * listSize);
　　　　　　　　　　　　　　　 if (pageText == pageIndex)
　　　　　　　　　　　　　　　　　　　 html += "<span class='currentPage'>" + pageText + "</span>";
　　　　　　　　　　　　　　　 else
　　　　　　　　　　　　　　　　　　　 html += "<a href='#" + pageText + "'>" + pageText + "</a>";
　　　　　　　　　　　 }
　　　　　　　　　　　 if (loopSize == listSize && pageCount > listSize) {
　　　　　　　　　　　　　　　 var nextList = (listIndex + 1) * listSize + 1;
　　　　　　　　　　　　　　　 if (nextList <= pageCount)
　　　　　　　　　　　　　　　　　　　 html += "<a href=\"#" + ((listIndex + 1) * listSize + 1) + "\"></a>";
　　　　　　　　　　　 }
　　　　　　　 }
　　　　　　　 if (pageCount == pageIndex) {
　　　　　　　　　　　 html += "<span>下一页</span>";
　　　　　　　　　　　 html += "<span>末页</span>";
　　　　　　　 }
　　　　　　　 else {
　　　　　　　　　　　 html += "<a href=\"#" + (pageIndex + 1) + "\">下一页</a>";
　　　　　　　　　　　 html += "<a href=\"#" + pageCount + "\">末页</a>";
　　　　　　　 }
　　　　　　　 html += "</div>";

　　　　　　　 if ($("tfoot", this).length == 0)
　　　　　　　　　　　 this.append("<tfoot></tfoot>");

　　　　　　　 $("tfoot:eq(0)", this).show().html("<tr><td colspan=\"" + $("thead th:visable", this).length + "\">" + html + "</td></tr>");

　　　　　　　 //翻页需要存储数据到table的属性中
　　　　　　　 this.attr("pagesize", pageSize);
　　　　　　　 this.attr("ispage", "1");
　　　　　　　 return this;
　　　 };
　　　 //==========================================================================
　　　 //表格排序（排序目前只是对ajax请求绑定排序，显存的目前还没排序。）
　　　 //==========================================================================
　　　 $.fn.bindSort = function() {

　　　　　　　 var url = this.attr("datasource");

　　　　　　　 if (url == undefined)
　　　　　　　　　　　 return this;

　　　　　　　 if (url.indexOf('?') == -1)
　　　　　　　　　　　 url += "?";

　　　　　　　 url = url.replace(/&?(sort|desc)=\w+/ig, "");
　　　　　　　 var id = this.attr("id");

　　　　　　　 $("th a", this).each(function() {
　　　　　　　　　　　 var sort = $(this).attr("sort");
　　　　　　　　　　　 var desc = $(this).attr("desc")
　　　　　　　　　　　 if (sort == undefined || sort == "")
　　　　　　　　　　　　　　　 return;

　　　　　　　　　　　 //加载设置样式
　　　　　　　　　　　 if (desc != undefined && sort != $("#" + id).attr("sort")) {
　　　　　　　　　　　　　　　 $(this).text($(this).text().replace("▼", "").replace("▲", "")); //使用文字样式
　　　　　　　　　　　 }
　　　　　　　　　　　 //$(this).removeClass("sort" + Math.abs(desc - 1));//使用图片样式
　　　　　　　　　　　 //设置点击
　　　　　　　　　　　 $(this).unbind("click").click(function() {

　　　　　　　　　　　　　　　 desc = Math.abs(desc - 1) || 0;

　　　　　　　　　　　　　　　 $(this).attr("desc", desc);

　　　　　　　　　　　　　　　 //点击后设置样式
　　　　　　　　　　　　　　　 $("#" + id).attr("sort", sort);
　　　　　　　　　　　　　　　 $(this).text($(this).text().replace("▼", "").replace("▲", "") + (desc == 1 ? "▼" : "▲")); //使用文字样式
　　　　　　　　　　　　　　　 //$(this).removeClass("sort" + Math.abs(desc - 1)).addClass("sort" + desc);//使用图片样式

　　　　　　　　　　　　　　　 //刷新Table数据
　　　　　　　　　　　　　　　 $("#" + id).bindTable({
　　　　　　　　　　　　　　　　　　　 url: url + "&sort=" + sort + "&desc=" + desc
　　　　　　　　　　　　　　　 });
　　　　　　　　　　　 });
　　　　　　　 });
　　　　　　　 return this;
　　　 };

编缉推荐阅读以下文章

• MVC+Jquery开发B/S系统：①列表绑定