zoukankan      html  css  js  c++  java
  • 启动客户端分页

          最近在看jQuery基础教程,书中一些Demo自己拿来敲敲,顺便巩固下基础基础知识: 客户端分页

    效果:

          

            

    javascript代码:

     $("table.sortable tbody tr:odd").addClass('odd');
                $("table.sortable tbody tr:even").addClass('even');
    
                //作为fn的一个属性来调用,此时使用jQuery对象就可以调用
                jQuery.fn.alternateRowColors = function () {
                    $('tbody  tr:odd', this).removeClass("even").addClass('odd');
                    $('tbody  tr:even', this).removeClass('odd').addClass('even');
                }
    
    
                $("table.sortable").each(function () {
                    var $table = $(this);
                    var currentPage = 0;
                    var numPerPage = 3;
                    var repagination = function () {
                        $table.find("tbody tr").hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
                    }
    
                    var numRows = $table.find("tbody tr").length;
                    var numPages = Math.ceil(numRows / numPerPage);
    
                    var $pager = $("<div class='pager'></div>");
    
                    for (var page = 0; page < numPages; page++) {
                        $("<span class='page-number'></span>").text(page + 1)
                            .bind('click', { newPage: page }, function (event) {
                                currentPage = event.data['newPage'];
                                repagination();
                                $(this).addClass('active').siblings().removeClass('active');
                            })
                            .appendTo($pager);
                    }
    
                    repagination();
                    $pager.insertAfter($table).find('span.page-number:first').addClass('active');
                });
    

      

  • 相关阅读:
    Linux-nmap
    MongoDb注意事项
    HTML如何转XTML
    Centos 64位 Install certificate on apache 即走https协议
    CentOS 下搭建部署独立SVN服务器全程详解(5.5)
    LNMP安装与配置
    64位CentOS 6.0下搭建LAMP环境
    Apache遇到的问题:APR not found
    超详细LAMP环境搭建
    偏方治百病
  • 原文地址:https://www.cnblogs.com/sword-successful/p/3551689.html
Copyright © 2011-2022 走看看