首页 \ 问答 \ 分页使用Javascript(Pagination using Javascript)

分页使用Javascript(Pagination using Javascript)

尝试使用javascript实现jQuery手风琴的分页。 我发现这个链接用于实现手风琴分页的javascript类。 但是,它的表现并不像预期的那样。 我玩了一段时间,但没有结果。 有人可以帮我弄清楚故障在哪里吗? 我非常感激。 在这里,我为它创建了JSfiddle

Javascript代码

     var paginatorHandle = null;
jQuery(document).ready(function () {
jQuery("#dalist").accordion({
    autoHeight: false
});

paginatorHandle = jQuery("#dalist").paginateAccordion({
    "currentPage": 0,
        "itemsPerPage": 3,
        "paginatorControl": jQuery("#accordionPaginator")
});

// initial paginate call
paginatorHandle.paginate();

jQuery("#accordionPaginator .nextPage").click(function () {
    paginatorHandle.nextPage();
});

jQuery("#accordionPaginator .previousPage").click(function () {
    paginatorHandle.previousPage();
});

jQuery("#accordionPaginator .goToPage").change(function () {
    var pageIndex = parseInt($(this).val(), radix);
    paginatorHandle.goToPage(pageIndex);
   });
});


//this is the main class

function AccordionPaginator(element, currentPage, itemsPerPage, paginatorControl) {
this.element = element;
this.currentPage = currentPage;
this.itemsPerPage = itemsPerPage;
this.paginatorControl = paginatorControl;

// does the actual pagination (shows/hides items)
this.paginate = function () {
    var index = this.currentPage * this.itemsPerPage;

    element.accordion("activate", index);
    element.children().hide();

    if (index < 0) {
        this.element.children("div:first").show();
        this.element.children("h3:first").show();
    } else {

        this.element.children("div:eq(" + index + ")")
            .show();

        this.element.children("h3:eq(" + index + "),h3:gt(" + index + ")")
            .filter(":lt(" + this.itemsPerPage + ")")
            .show();
    }

    this.refreshControl();
};

// increments the currentPage var (if possible) and calls paginate
this.nextPage = function () {
    if (this.currentPage + 1 >= this.getMaxPageIndex()) {
        return;
    }

     this.currentPage++;
    this.paginate();
};

// decrements the currentPage var (if possible) and calls paginate
this.previousPage = function () {
    if (this.currentPage - 1 < 0) {
        return;
    }

    this.currentPage--;
    this.paginate();
};

// sets currentPage var (if possible) and calls paginate
this.goToPage = function (pageIndex) {
    if ((pageIndex < 0) || (pageIndex >= this.getMaxPageIndex())) {
        return;
    }

    this.currentPage = pageIndex;
    this.paginate();
    };

// returns the maximum of pages possible with the current number of items
this.getMaxPageIndex = function () {
    var items = this.element.children("h3");
    var fullPages = items.length / this.itemsPerPage;
    var restPage = items.length % (this.itemsPerPage > 0 ? 1 : 0);
    return fullPages + restPage;
};

// fills up the paginator control
this.refreshControl = function () {
    if (this.paginatorControl === null) {
        return;
    }

    var pageList = this.paginatorControl.children(".goToPage");
    pageList.empty();
    for (var i = 0; i < this.getMaxPageIndex(); i++) {
        pageList.append("<option value=\"" + i + "\">" + (i + 1) + "</option>");
    }
    pageList.val(this.currentPage);
};
}

jQuery.fn.extend({
paginateAccordion: function (options) {
    var currentPage = options.currentPage ?parseInt(options.currentPage, radix) : 0;
    var itemsPerPage = options.itemsPerPage ? parseInt(options.itemsPerPage, radix) : 5;
    var paginatorControl = options.paginatorControl;

    return new AccordionPaginator(this, currentPage, itemsPerPage, paginatorControl);
    }
});

Trying to implement pagination for jQuery accordion using javascript. I found this link for a javascript class to implement accordion pagination. However, it's not behaving as expected. I played with it for a while but with no result. Can someone please help me figure where the fault is? I'd appreciated so much. Here I created JSfiddle for it.

Javascript code

     var paginatorHandle = null;
jQuery(document).ready(function () {
jQuery("#dalist").accordion({
    autoHeight: false
});

paginatorHandle = jQuery("#dalist").paginateAccordion({
    "currentPage": 0,
        "itemsPerPage": 3,
        "paginatorControl": jQuery("#accordionPaginator")
});

// initial paginate call
paginatorHandle.paginate();

jQuery("#accordionPaginator .nextPage").click(function () {
    paginatorHandle.nextPage();
});

jQuery("#accordionPaginator .previousPage").click(function () {
    paginatorHandle.previousPage();
});

jQuery("#accordionPaginator .goToPage").change(function () {
    var pageIndex = parseInt($(this).val(), radix);
    paginatorHandle.goToPage(pageIndex);
   });
});


//this is the main class

function AccordionPaginator(element, currentPage, itemsPerPage, paginatorControl) {
this.element = element;
this.currentPage = currentPage;
this.itemsPerPage = itemsPerPage;
this.paginatorControl = paginatorControl;

// does the actual pagination (shows/hides items)
this.paginate = function () {
    var index = this.currentPage * this.itemsPerPage;

    element.accordion("activate", index);
    element.children().hide();

    if (index < 0) {
        this.element.children("div:first").show();
        this.element.children("h3:first").show();
    } else {

        this.element.children("div:eq(" + index + ")")
            .show();

        this.element.children("h3:eq(" + index + "),h3:gt(" + index + ")")
            .filter(":lt(" + this.itemsPerPage + ")")
            .show();
    }

    this.refreshControl();
};

// increments the currentPage var (if possible) and calls paginate
this.nextPage = function () {
    if (this.currentPage + 1 >= this.getMaxPageIndex()) {
        return;
    }

     this.currentPage++;
    this.paginate();
};

// decrements the currentPage var (if possible) and calls paginate
this.previousPage = function () {
    if (this.currentPage - 1 < 0) {
        return;
    }

    this.currentPage--;
    this.paginate();
};

// sets currentPage var (if possible) and calls paginate
this.goToPage = function (pageIndex) {
    if ((pageIndex < 0) || (pageIndex >= this.getMaxPageIndex())) {
        return;
    }

    this.currentPage = pageIndex;
    this.paginate();
    };

// returns the maximum of pages possible with the current number of items
this.getMaxPageIndex = function () {
    var items = this.element.children("h3");
    var fullPages = items.length / this.itemsPerPage;
    var restPage = items.length % (this.itemsPerPage > 0 ? 1 : 0);
    return fullPages + restPage;
};

// fills up the paginator control
this.refreshControl = function () {
    if (this.paginatorControl === null) {
        return;
    }

    var pageList = this.paginatorControl.children(".goToPage");
    pageList.empty();
    for (var i = 0; i < this.getMaxPageIndex(); i++) {
        pageList.append("<option value=\"" + i + "\">" + (i + 1) + "</option>");
    }
    pageList.val(this.currentPage);
};
}

jQuery.fn.extend({
paginateAccordion: function (options) {
    var currentPage = options.currentPage ?parseInt(options.currentPage, radix) : 0;
    var itemsPerPage = options.itemsPerPage ? parseInt(options.itemsPerPage, radix) : 5;
    var paginatorControl = options.paginatorControl;

    return new AccordionPaginator(this, currentPage, itemsPerPage, paginatorControl);
    }
});

原文:https://stackoverflow.com/questions/26509720
更新时间:2024-03-30 20:03

最满意答案

假设问题与ADODB方面有关,而不是你试图渲染2000 <LI>的事实......

重用ADODB.Connection通常是一种很好的做法。 关闭连接,然后重新打开它可能会花费你一点点性能。

您还应该指定RecordSet属性(在打开RecordSet之前):

  1. CursorLocation:adUseServer [2]在服务器上运行游标; 服务器以块的形式将记录集流式传输到客户端,允许客户端更快地开始处理,而不是等到收到整个集合; 此外,内存在服务器上进行管理,因此如果很多人同时访问该页面,您将不会在客户端上出现内存问题; http://msdn.microsoft.com/en-us/library/ee252442(v=bts.10).aspx

  2. LockType:adLockReadOnly [1]表示无法更改数据的只读记录; 如果你不改变数据,这应该是最快的; http://msdn.microsoft.com/en-us/library/ee252458(v=BTS.10).aspx

  3. CursorType:adOpenForwardOnly [0]指定此值将打开仅向前类型的游标。 此CursorType与静态游标相同,只是您只能向前滚动记录。 当只需要一次通过Recordset时,这可以提高性能。 http://msdn.microsoft.com/en-us/library/ee252445(v=BTS.10).aspx

您还应该摆脱“计数”查询...除非您出于其他原因需要它。 否则,你可以设置permissionsCount = UBOUND(permissionsArray)的值......我想......自从我做了任何vbscript以来已经很久了!

SQL = "select OP_ObjectID, P_Name from l_objectpermission inner join A_Permission on op_permissionID = P_permissionID order by P_Name"

Set rs = Server.CreateObject("ADODB.RecordSet")
rs.CursorLocation = 2 'adUseServer
rs.LockType = 1 'adLockReadOnly
rs.CursorType = 0 'adOpenForwardOnly
rs.ActiveConnection = c
rs.Open SQL

If NOT rs.EOF Then
   permissionsArray = rs.GetRows()
End If

rs.close()
Set rs = Nothing
c.Close()
Set c = Nothing


Assuming the issue has to do with the ADODB side of things, and not the fact that you are trying to render 2000 <LI>'s...

It generally is a good practice to reuse your ADODB.Connection. Closing the connection and then reopening it is probably costing you a slight amount of performance.

You should also specify the RecordSet properties (before the RecordSet is opened):

  1. CursorLocation: adUseServer[2] runs the cursor on the server; the server streams the recordset to the client in chunks, allowing the client to start processing sooner, rather than waiting until the entire set is received; also, the memory is managed on the server so you won't have memory issues on the client if lots of people are hitting the page at the same time; http://msdn.microsoft.com/en-us/library/ee252442(v=bts.10).aspx

  2. LockType: adLockReadOnly[1] indicates read-only records where the data cannot be altered; if you are not altering the data, this should be the fastest; http://msdn.microsoft.com/en-us/library/ee252458(v=BTS.10).aspx

  3. CursorType: adOpenForwardOnly[0] Specifying this value opens a forward-only-type cursor. This CursorType is identical to a static cursor, except that you can only scroll forward through records. This improves performance when only one pass through a Recordset is needed. http://msdn.microsoft.com/en-us/library/ee252445(v=BTS.10).aspx

You should also get rid of the "count" query...unless you need it for some other reason. Otherwise, you can set the value of permissionsCount = UBOUND(permissionsArray)...i think...it's been a long time since i've done any vbscript!

SQL = "select OP_ObjectID, P_Name from l_objectpermission inner join A_Permission on op_permissionID = P_permissionID order by P_Name"

Set rs = Server.CreateObject("ADODB.RecordSet")
rs.CursorLocation = 2 'adUseServer
rs.LockType = 1 'adLockReadOnly
rs.CursorType = 0 'adOpenForwardOnly
rs.ActiveConnection = c
rs.Open SQL

If NOT rs.EOF Then
   permissionsArray = rs.GetRows()
End If

rs.close()
Set rs = Nothing
c.Close()
Set c = Nothing

相关问答

更多
  • 这个链接将帮助您了解如何最小化HTTP请求。 链接1 链接2 谢谢user1429080的链接.. :) Well this links will help you to understand how to minimize the HTTP requests. Link 1 Link 2 Thank you user1429080 for the links.. :)
  • 最好的方法是确保脚本不会创建/销毁不必要的变量,并尽可能提高效率。 之后,您可以查看缓存服务,以便服务器不必重新分析页面的特定部分。 如果所有这些都不能让它达到你需要的速度,你甚至可以“编译”php代码。 Facebook这样做是为了支持更快的加载时间。 他们创建了一个名为“HipHop for PHP”的东西,你可以在以下网址阅读: https : //developers.facebook.com/blog/post/358/ 还有其他的PHP编译器可以用来提供帮助。 如果所有这些都失败了,那么我建议你 ...
  • 一些选项: 将图像分成多个页面 使用“延迟加载”脚本,只会在图像进入视口时请求图像 通过用户操作使用AJAX根据需要请求图像 利用图像的外部托管(flickr等)在不同服务器之间拆分服务器请求。 Some options: split up the images across multiple pages use a 'lazy load' script that will only request images as they come into the viewport use AJAX to requ ...
  • 假设问题与ADODB方面有关,而不是你试图渲染2000
  • 的事实...... 重用ADODB.Connection通常是一种很好的做法。 关闭连接,然后重新打开它可能会花费你一点点性能。 您还应该指定RecordSet属性(在打开RecordSet之前): CursorLocation:adUseServer [2]在服务器上运行游标; 服务器以块的形式将记录集流式传输到客户端,允许客户端更快地开始处理,而不是等到收到整个集合; 此外,内存在服务器上进行管理,因此如果很多人同时访问该页面,您将不会在客 ...
  • 是的,将页面作为Content-Encoding: gzip传递Content-Encoding: gzip可能会更快地将页面本身传递给浏览器。 但是,如果真正的问题是用户看起来页面缓慢加载,则需要记住显示页面的过程有几个部分,其中只有一个部分。 在为页面本身加载HTML之后,浏览器仍然需要解析它,开始执行页面中的任何脚本,并加载页面所需的任何其他数据(例如图像)。 这最后一部分需要花费大量时间,这通常会导致页面显示缓慢显示。 Yes, delivering the page as Content-Enco ...
  • 我可以看到,当多个用户将进入您的网站时,每次都会有一个服务器级别命中外部wharehouse页面。 这将是非常复杂的,并且很多依赖于wharehouse页面的速度和执行。 Magento提供了自己的Soap API。 任何外部soap用户,如果有权限,可以向我们发送soap请求以更新产品信息。 您可以创建要在magento中检查可用性的产品属性。 当任何产品的可用性发生变化时,要求wharehouse团队将自动肥皂请求发送给magento。 我经历过这种情况,其他方依赖于检查产品的可用性。 每次点击他们的页 ...
  • 为了获得最快的结果: 首先必须加载CSS,尽可能多地内联CSS,而不是在html中,而是在head部分内联它。 这是持续快速加载css的最快方法。 Bootstrap是非常臃肿和超过1个额外的服务器请求,如果你可以完全放弃它,如果没有,哦,好吧,带有外部文件的css,jQuery之后的js位。 在head部分中没有放置JS文件(除了modernizr,如果你使用它),将jQuery链接放在结束体标记之前。 Jquery必须是第一个要加载的文件,然后引导js,“main”js或你的jQuery代码可以在bod ...
  • 就我个人而言,我会选择你提到的第二种方法。 第一次登录时,可以异步查询每项服务,并在进程运行时向用户显示某种活动/状态栏。 然后,您可以在从每个服务获取结果时填充页面。 然后,您可以缓存每个用户调用的结果,这样您就不必每次都调用apis。 这可以减轻服务器的负担,快速加载页面,并为用户提供一些活动指示(以及随着页面内容的加载而对页面进行严重更新)。 我认为这些加起来可以提供最好的用户体验。 Personally, I would opt for the second method you mention. ...
  • 因为你定义了$('.load') ,你不需要为$(this)做find('a') $(this) 。 只需使用$(this).attr('id') since you defined $('.load'), you don't need to do find('a') for $(this). Just use $(this).attr('id')
  • .load从指定的URL加载来自服务器的数据,并将结果内容放在指定的元素中。 当元素及其子元素已完全加载时,会发生load 事件 。 此事件仅适用于某些类型的元素。 基本上,他们做了两件完全不同的事情(但他们在jQuery中确实有相同的函数名,所以很容易混淆)。 至于在加载新内容时事件处理程序未被绑定的问题,您需要使用on使用事件委派 : $("container_selector").on("event", "child-element-selector", function () {...}); .l ...
  • 相关文章

    更多
  • javascript 问题
  • javascript的验证
  • 请教javascript问题
  • javascript 注释
  • javascript 基本语法
  • JavaScript 事件
  • JavaScript 事件
  • javascript url编码
  • javascript常用对象
  • javascript日期相加函数
  • 最新问答

    更多
  • linux环境下怎么用maven编译一个已有的java项目?
  • Ionic2和IonicDeploy(Ionic2 and IonicDeploy)
  • 尝试分组和别名数据时出错(Error when Attempting to Group and Alias Data)
  • Facebook PHP API错误代码100:API中提供的appsecret_proof无效(Facebook PHP API Error code 100: Invalid appsecret_proof provided in the API)
  • 不用u盘和光盘怎么安装linux系统
  • 表名作为变量参数(Table name as variable parameter)
  • 我想学计算机 在望京花园住 附近那有这样的地方可以学
  • 删除原始记录的重复项(Removing duplicates with original records)
  • Pandas:使用.astype(str)时忽略空值?(Pandas: ignore null values when using .astype(str)?)
  • Python新手阵列 - 列表转换[重复](Python newbie array - list conversion [duplicate])
  • java.lang.String cannot be cast to java.lang.Float
  • 带参数的选择器(Selector with argument)
  • python中的for循环语法(for loop syntax in python)
  • Nunit - 无法检索类别属性(NUnit - Can't retrieve a category property)
  • python3 xpath无法到达子节点(AttributeError:'NoneType'对象没有属性'text')(python3 xpath can't reach a child node (AttributeError: 'NoneType' object has no attribute 'text'))
  • Android自动 - 如何启用开发人员模式(Android auto - how to enable developer mode)
  • java weka stringtowordvector没有正确计算单词出现次数(java weka stringtowordvector is not counting word occurences properly)
  • 如何解释DHT响应中的“节点”?(How to interpret 'nodes' in a DHT response?)
  • 什么是使用opencv和树莓相机模块进行人脸检测的最佳算法(What is the best algorithm for face detection using opencv and raspberry camera module)
  • 可以somone解释这两个问题的解决方案(c程序,mutex,线程)吗?(Can someone explain the solution of these two questions (c program,mutex,threads)?)
  • 如何解决SyntaxError:意想不到的令牌var gulp(How to fix SyntaxError: Unexpected token var in gulp)
  • 在满足R中的第一个实例后,在所有行中分配值(Assign value in all rows following satisfaction of first instance in R)
  • 如何记录Atk4 auth /登录事件(How to log Atk4 auth/login event)
  • 是否有必要在新的scala项目中添加我的自定义scala库依赖项?(is it necessary to add my custom scala library dependencies in new scala project?)
  • Java中对象类的继承(Inheritance of Object Class in Java)
  • 如何在jquery自动完成中获取当前元素?(How to get current element in jquery autocomplete?)
  • 学电子商务甚么大学好
  • @Override在java中(@Override in java)
  • 虚拟机中怎么给linux装office
  • Laravel邮件参数(sendmail / smtp)(Laravel mail parameters (sendmail/smtp))