javascript分页代码实例分享(js分页)

调用:

代码如下:

var pageChange = function (index) {
            var html = pager("divid", index, 5, 1000, pageChange, { showGoTo: false, showFirst: false });
        }

实现:

代码如下:

pager = function (divPager, pageIndex, pageSize, totalCount, pageChange, opt) {

var theOpt = {
         barSize: 5, //分页条显示的页码数  
         barTemplate: "{bar}  共{totalPage}页{totalCount}条 {goto}", //显示模板
         autoHide: true, //是否自动隐藏
         showFirst: true, //在totalPage>barSize时是自动否显示第一页链接
         showLast: true, //在totalPage>barSize时是自动否显示最后一页链接
         showGoTo: true, //是否显示GoTo
         autoHideGoTo: true //如果太少是否自动隐藏GoTo
     };

if (opt) {
         if (opt.barSize)
             theOpt.barSize = opt.barSize;
         if (opt.barTemplate)
             theOpt.barTemplate = opt.barTemplate;
         if (opt.autoHide == false)
             theOpt.autoHide = false;
         if (opt.showFirst == false)
             theOpt.showFirst = false;
         if (opt.showLast = false)
             theOpt.showLast = false;
         if (opt.showGoTo == false)
             theOpt.showGoTo = false;
         if (opt.autoHideGoTo == false)
             theOpt.autoHideGoTo = false;
     }
     var handles = window.myPagerChanges = (function (x) { return x; } (window.myPagerChanges || {}));

if (!myPagerChanges[divPager]) myPagerChanges[divPager] = pageChange;

var startPage = 0;  //分页条起始页
     var endPage = 0;    //分页条终止页
     var showFirst = true;
     var showLast = true;

if (isNaN(pageIndex)) {
         pageIndex = 1;
     }
     pageIndex = parseInt(pageIndex);
     if (pageIndex <= 0)
         pageIndex = 1;
     if (pageIndex * pageSize > totalCount) {
         pageIndex = Math.ceil(totalCount / pageSize);
     }

if (totalCount == 0) { //如果没数据
         document.getElementById(divPager).innerHTML = "";
         return "";
     }

var totalPage = Math.ceil(totalCount / pageSize);
     if (theOpt.autoHide && totalCount <= pageSize) {   //自动隐藏
         document.getElementById(divPager).innerHTML = "";
         return "";
     }

if (totalPage <= theOpt.barSize) {
         startPage = 1;
         endPage = this.totalPage;
         theOpt.showLast = theOpt.showFirst = false;
     }
     else {
         if (pageIndex <= Math.ceil(theOpt.barSize / 2)) { //最前几页时
             startPage = 1;
             endPage = theOpt.barSize;
             theOpt.showFirst = false;
         }
         else if (pageIndex > (totalPage - theOpt.barSize / 2)) { //最后几页时
             startPage = totalPage - theOpt.barSize + 1;
             endPage = totalPage;
             theOpt.showLast = false;
         }
         else {                                          //中间的页时
             startPage = pageIndex - Math.ceil(theOpt.barSize / 2) + 1;
             endPage = pageIndex + Math.floor(theOpt.barSize / 2);
         }
         if (totalPage <= (theOpt.barSize * 1.5)) {
             theOpt.showLast = theOpt.showFirst = false;
         }
     }

function _getLink(index, txt) {
         if (!txt) txt = index;
         return "<a href='javascript:;' style='margin: 2px 5px;border: 1px solid #6d8cad;color: #0269BA;padding: 2px 5px;text-decoration: none;' onclick='myPagerChanges[\"" + divPager + "\"](" + index + ")'>" + txt + "</a>";
     }

var barHtml = "";  //分页条
     barHtml += pageIndex == 1 ? "" : _getLink(pageIndex - 1, "上一页");
     if (theOpt.showFirst) {
         barHtml += _getLink(1) + "<span>...</span>";
     }
     for (var index = startPage; index <= endPage; index++) {

if (index == pageIndex) {
             barHtml += "<span style='color:red;font-weight:blod; '>" + index + "</span>";
         }
         else {
             barHtml += _getLink(index);
         }
     }
     if (theOpt.showLast) {
         barHtml += "<span>...</span>" + _getLink(totalPage);
     }
     barHtml += pageIndex == totalPage ? "" : _getLink(pageIndex + 1, "下一页");

var gotoHtml = "";  //goto框及按钮
     if (theOpt.showGoTo && theOpt.barTemplate.indexOf("{goto}") > 0) {
         if ((theOpt.autoHideGoTo && totalPage > 15) || theOpt.autoHideGoTo == false) {
             var txtid = divPager + "_goIndex";
             var indexVal = "document.getElementById(\"" + txtid + "\").value";
             gotoHtml += "<input type='text' onkeypress='if(event.keyCode==13){myPagerChanges[\"" + divPager + "\"](" + indexVal + ")}' id='" + txtid + "' value=" + pageIndex + " style='width:30px'>";
             gotoHtml += " <input type='button' class='page_bg' value='go' onclick='myPagerChanges[\"" + divPager + "\"](" + indexVal + ")'>";
         }
     }

//替换模板
     var pagerHtml = theOpt.barTemplate.replace("{bar}", barHtml)
                               .replace("{totalCount}", totalCount)
                               .replace("{pageIndex}", pageIndex)
                               .replace("{totalPage}", totalPage)
                               .replace("{goto}", gotoHtml);

document.getElementById(divPager).innerHTML = pagerHtml;
     return pagerHtml;
 };

(0)

相关推荐

  • 纯js分页代码(简洁实用)

    复制代码 代码如下: //每页显示字数PageSize=5000;//分页模式flag=2;//1:根据字数自动分页 2:根据[NextPage]分页//默认页startpage = 1;//导航显示样式 0:常规 1:直接 3:下拉TopShowStyle = 1;DownShowStyle = 0; var currentSet,CutFlag,TotalByte,PageCount,key,tempText,tempPage; key=""; currentSet=0; var

  • 纯js写的分页表格数据为json串

    什么也不说了,直接上代码: 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <% String path = request.getContextPath(); String ba

  • JS+CSS实现的拖动分页效果实例

    本文实例讲述了JS+CSS实现拖动分页效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>拖动分页</title> <meta http-equiv=Content-Type content="text/html; charset=utf-8"> <style> body{ border:0px; margin:0px; overflow:hidden; backgrou

  • js脚本分页代码分享(7种样式)

    本文跟大家分享了7种JS脚本分页样式,相信总有一款是适合你的哦 抓紧先上图给大家挑选一下------------------运行效果------------------- 其实小编挺喜欢最后一款的,亲,你呐? 为大家再分享实现JS脚本分页的代码,直接复制代码,运行即可,抓紧试试吧 <html> <head> <title>7种JS脚本分页代码</title> <style> body {font-size: 12px;} /* Pages Mai

  • Jquery+Ajax+Json+存储过程实现高效分页

    之前在做分页时,很多朋友都是用Jquery分页插件,之前我就用的jquery.paper,有需要的朋友可以联系我,接下来小编给大家分享用Jquery+Ajax+Json+存储过程实现高效分页. 实现此功能用分页存储过程,pagination,js样式,废话不多了,具体请看下面代码  分页存储过程:PAGINATION CREATE PROCEDURE [dbo].[PAGINATION] @FEILDS VARCHAR(),--要显示的字段 @PAGE_INDEX INT,--当前页码 @PAG

  • js分页工具实例

    本文实例讲述了js分页工具的用法.分享给大家供大家参考.具体实现方法如下: js代码部分: 复制代码 代码如下: /**   * 分页js   */  var Page;    (function(){          var Page = {version:"1.0",author:"liuxingmi"};          var showPage = 9;          Page.navigation = function(divId, totalRe

  • jsp分页显示完整实例

    本文实例讲述了jsp分页显示的实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> <%@include file ="../inc/ChkPwd.jsp"%>

  • js对文章内容进行分页示例代码

    Thinkphp中文章显示代码: 复制代码 代码如下: <div id="showContent">{$article.content|htmlspecialchars_decode}</div> <div id="articlePages"></div> js实现代码: 复制代码 代码如下: <script type="text/javascript"> var obj = docum

  • js前台分页显示后端JAVA数据响应

    好久没有写过代码了,手有些痒了,正好底下小弟们某些功能的实现着实影响工程进度,便自己动手给写了一段. 功能:js前台分页显示 + 后台数据响应(JAVA Servlet即可) 框架:jquery1.8.7 此文目的:给那些刚入行软件开发,喜欢这也看看,那也看看,这儿copy一下,那儿copy一下初级小菜鸟们做一个表帅; 1 为程序者需认真踏实坐下来; 2 程序需要有投入才有收获; 3 有收获才有鼓舞,才有动力一步一步往下走! 下面上代码,具体会有小注释 1.web页面的逻辑处理(js代码写到页面

  • js写的评论分页(还不错)

    复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer

  • JS实现当前页居中分页效果的方法

    本文实例讲述了JS实现当前页居中分页效果的方法.分享给大家供大家参考.具体实现方法如下: function show_page(cur_pc) { var cp=cur_pc; //curent page count var tp=this.p; //total page count var sp=this.pc; //show page count var bp; //begin page count var ep; //end page count if(sp%2==0) sp=sp+1;

  • js分页代码分享

    复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script  type='text/javascript' src='jQuery.js'></script><style type

  • js+css实现的简单易用兼容好的分页

    效果:  html: 复制代码 代码如下: <div id="page"></div> 用法: 复制代码 代码如下: var total = 310; var pageNo = 1; var pageCount = 31;//共有多少页 var pageSize = 10; var actionName = "list.action"; var otherParam = "&name='www'&order='tim

随机推荐