简单table分页

html

<table id="pagingTable">
        <thead>
            <tr>
                <td>
                    第一列
                </td>
                <td>
                    第二列
                </td>
                <td>
                    第三列
                </td>
                <td>
                    第四列
                </td>
                <td>
                    第五列
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td>
                    2
                </td>
                <td>
                    2
                </td>
                <td>
                    2
                </td>
                <td>
                    2
                </td>
                <td>
                    2
                </td>
            </tr>
            <tr>
                <td>
                    3
                </td>
                <td>
                    3
                </td>
                <td>
                    3
                </td>
                <td>
                    3
                </td>
                <td>
                    3
                </td>
            </tr>
            <tr>
                <td>
                    4
                </td>
                <td>
                    4
                </td>
                <td>
                    4
                </td>
                <td>
                    4
                </td>
                <td>
                    4
                </td>
            </tr>
            <tr>
                <td>
                    5
                </td>
                <td>
                    5
                </td>
                <td>
                    5
                </td>
                <td>
                    5
                </td>
                <td>
                    5
                </td>
            </tr>
            <tr>
                <td>
                    6
                </td>
                <td>
                    6
                </td>
                <td>
                    6
                </td>
                <td>
                    6
                </td>
                <td>
                    6
                </td>
            </tr>
            <tr>
                <td>
                    7
                </td>
                <td>
                    7
                </td>
                <td>
                    7
                </td>
                <td>
                    7
                </td>
                <td>
                    7
                </td>
            </tr>
            <tr>
                <td>
                    8
                </td>
                <td>
                    8
                </td>
                <td>
                    8
                </td>
                <td>
                    8
                </td>
                <td>
                    8
                </td>
            </tr>
            <tr>
                <td>
                    9
                </td>
                <td>
                    9
                </td>
                <td>
                    9
                </td>
                <td>
                    9
                </td>
                <td>
                    9
                </td>
            </tr>
            <tr>
                <td>
                    11
                </td>
                <td>
                    11
                </td>
                <td>
                    11
                </td>
                <td>
                    11
                </td>
                <td>
                    11
                </td>
            </tr>
            <tr>
                <td>
                    13
                </td>
                <td>
                    13
                </td>
                <td>
                    13
                </td>
                <td>
                    13
                </td>
                <td>
                    13
                </td>
            </tr>
            <tr>
                <td>
                    23
                </td>
                <td>
                    23
                </td>
                <td>
                    23
                </td>
                <td>
                    23
                </td>
                <td>
                    23
                </td>
            </tr>
            <tr>
                <td>
                    33
                </td>
                <td>
                    33
                </td>
                <td>
                    33
                </td>
                <td>
                    33
                </td>
                <td>
                    33
                </td>
            </tr>
            <tr>
                <td>
                    43
                </td>
                <td>
                    43
                </td>
                <td>
                    43
                </td>
                <td>
                    43
                </td>
                <td>
                    43
                </td>
            </tr>
            <tr>
                <td>
                    53
                </td>
                <td>
                    53
                </td>
                <td>
                    53
                </td>
                <td>
                    53
                </td>
                <td>
                    53
                </td>
            </tr>
            <tr>
                <td>
                    63
                </td>
                <td>
                    63
                </td>
                <td>
                    63
                </td>
                <td>
                    63
                </td>
                <td>
                    63
                </td>
            </tr>
            <tr>
                <td>
                    73
                </td>
                <td>
                    73
                </td>
                <td>
                    73
                </td>
                <td>
                    73
                </td>
                <td>
                    73
                </td>
            </tr>
            <tr>
                <td>
                    83
                </td>
                <td>
                    83
                </td>
                <td>
                    83
                </td>
                <td>
                    83
                </td>
                <td>
                    83
                </td>
            </tr>
            <tr>
                <td>
                    93
                </td>
                <td>
                    93
                </td>
                <td>
                    93
                </td>
                <td>
                    93
                </td>
                <td>
                    93
                </td>
            </tr>
            <tr>
                <td>
                    113
                </td>
                <td>
                    113
                </td>
                <td>
                    113
                </td>
                <td>
                    113
                </td>
                <td>
                    113
                </td>
            </tr>
            <tr>
                <td>
                    123
                </td>
                <td>
                    123
                </td>
                <td>
                    123
                </td>
                <td>
                    123
                </td>
                <td>
                    123
                </td>
            </tr>
        </tbody>
    </table>

css

    <style>
        .pageInit
        {
            padding: 5px 10px;
            border: 1px solid #ff9600;
            text-decoration: none;
            color: #ff6500;
            margin-left: 10px;
        }
        .pageSelected
        {
            padding: 5px 10px;
            border: 1px solid #ff6500;
            text-decoration: none;
            color: #ff6500;
            background: #ffbe94;
            margin-left: 10px;
        }
    </style>

js

  <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

    //调用js
        $(function () {
            simplePaging($(‘#pagingTable‘), 4);
        });
        /**
        * 要求:table的绘制需要规范,即table需要采用如下格式:
        * <table>
        * <thead>
        * </thead>
        * <tbody>
        * </tbody>
        * </table>
        * 说明:本分页函数仅对tbody中的行进行分页显示
        *
        * @param {} table   table对象
        * @param {} pageSize  每页显示的行数
        *
        */
        function simplePaging(table, pageSize) {
            var $selectedPage; //被选中的页数
            var $table = $(table); //表格对象
            var currentPage = 0; //当前页默认值
            var sumRows = $table.find(‘tbody tr‘).length; //总行数
            var sumPages = Math.ceil(sumRows / pageSize); //总页数
            //避免多次调用产生重复的页码
            $table.next("div[tablePagingDiv]").remove();
            if (sumPages > 1) {
                $table.bind(‘paging‘, function () {
                    //默认所有行都隐藏,然后根据分页显示
                    $table.find(‘tbody tr‘).hide().slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
                });
                //页码div
                var $pager = $(‘<div tablePagingDiv="" style="height:40px;line-height:40px;"></div>‘);
                for (var pageIndex = 0; pageIndex < sumPages; pageIndex++) {

                    $(‘<a href="#"><span>‘ + (pageIndex + 1) + ‘</span></a>‘).bind(‘click‘, { ‘newPage‘: pageIndex }, function (event) {
                        currentPage = event.data[‘newPage‘];
                        $selectedPage = $(this);
                        $(this).addClass(‘pageSelected‘).siblings().removeClass(‘pageSelected‘);
                        //为每一个要显示的页数上添加触发分页函数
                        $table.trigger(‘paging‘);
                    }).appendTo($pager);
                    $pager.append(" ");
                }
                //添加初始化css
                $(‘a‘, $pager).addClass(‘pageInit‘);
                $(‘a:first‘, $pager).addClass(‘pageSelected‘);
                //添加鼠标hover效果
                $(‘a‘, $pager).hover(function () {
                    $(this).addClass(‘pageSelected‘);
                }, function () {
                    $(this).removeClass(‘pageSelected‘);
                    //被单击的页面的样式
                    if ($selectedPage == null) {
                        $(‘a:first‘, $pager).addClass(‘pageSelected‘);
                    }
                    else {
                        $selectedPage.addClass(‘pageSelected‘);
                    }
                });
                $pager.insertAfter($table);
                //在table上触发paging事件
                $table.trigger(‘paging‘);
            }
        }
    </script>

源码文件:HTMLPage1.zip

时间: 2024-10-27 09:43:25

简单table分页的相关文章

html 布局;css3+jq 下拉菜单;table分页动态添加行;html5本地存储;简单易用的html框架

简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下拉菜单美化 1 input{appearance:none;background-color:transparent;border: solid 0px #000;} /*input 无边框*/ 2 input:disabled{background-color:#d2d2d2;border:0px

AngularJS实现简单的分页功能

本篇文章由:http://xinpure.com/angularjs-simple-paging-functionality/ 初学 AngularJS, 尝试着写一些小功能 代码逻辑写得略粗糙,仅仅只是实现了简单的分页功能,使用 AngularJS 尝尝鲜. AngularJS Code (Users.js) var Users = angular.module('Users', []); Users.controller('UserList', function($scope, $http)

Table 分页处理

介绍两种table分页处理:PHP分页 和 js(jquery.table)分页. 一:jquery.table: 1:下载两个文件:table_jui.css 和 jquery.dataTables.min.js(当然前面的加载 jquery.js文件):将其拉入html 前面. table_jui.css  和   jquery.dataTables.min.js 2:建表: 1 <table style="width: 100%; margin-bottom:8px; "

ASP.NET MVC 简单的分页思想与实现

, 作为一个程序猿,数据分页是每个人都会遇到的问题.解决方案更是琳琅满目,花样百出.但基本的思想都是差不多的. 下面给大家分享一个简单的分页器,让初学者了解一下最简单的分页思想,以及在ASP.NET MVC中的简单实现与应用. 一,定义分页器类 在ASP.net MVC中,分页的数据源可能是各种不同的类型,所以最好使用泛型来定义. public class PagingHelper<T> 二,基本三要素 实现分页人所共知的三个基本属性: DataSource:数据源,要知道数据源共计多少条数据

【Demo】jQuery 设置简单的分页

功能描述: (1)设定起始页位置和每页的大小: (2)绑定自定义的分页事件,在事件中隐藏当前页不需要显示的行: (3)为表格添加页链接: (4)绑定链接的单击事件,在事件中触发表格分页事件. 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javasc

“最简单的分页代码”

参加培训的时候,教课的老师说这是他所见过的最简单的分页写法.挺容易理解的,分享给大家 /****分页类* @param int $num  总页数* @param int $cnt     每页显示多少行数据* @param int $curr     当前是第多少页*/ function fenye( $num,$cnt = 10,$curr = 1){ // 第一步:计算一共有多少页,ceil函数是向上取整 $pages = ceil( $num / $cnt ); // 最左边的页码,就是

struts2实现最简单的分页技术

struts2实现分页技术: 在对MemberUser类(表)中的数据进行分页:  1.在MemberUserDaoImpl 中添加 获取数据库中表的总数量的方法: public int counterByPage() { // TODO Auto-generated method stub sql="select count(*) from memberuser"; ResultSet rs =util.Query(sql); int totalCount=0; try { whil

js完美实现table分页

// JavaScript Document /** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为String * @param sTBodyId 分页表格TBODY的属性ID值,为String,此项为要分页的主体内容 * @Version 1.0.0 * @author 辛现宝 2007-01-15 created * var __variable__; private * function __method_

用Vue2.0实现简单的分页及跳转

用Vue2.0实现简单的分页及跳转 2018年07月26日 20:29:51 Freya_yyy 阅读数 3369 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/Freya_yyy/article/details/81227016 用Vue2.0实现一个数据的分页及页数的跳转,代码如下: 数据绑定:{{...}}        <a v-on:click="btnClick(item)">{{item}}</a>