AngularJs创建自己的Grid–分页组件(2)

一个后台中总需要一款分页,那我为了自己方便使用,实现如下效果

我把这个组件命名为tm.pagination,原因是因为起名真的太难起了。而且我网名也叫天名, TM就这样了吧。github地址https://github.com/miaoyaoyao/AngularJs-UI

分页在线查看

点击预览

http://demo.miaoyueyue.com/js/ng/AngularJs-UI/demo/pagination.html

分页兼容性

对不起,我不会去测试老掉牙的ie8浏览器。目前测试了ie9,chrome,firefox,有任何问题,联系我。

基本使用方法

整个分页直接参考如下:

<!doctype html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../lib/bootstrap/3.2.0/css/bootstrap.min.css">
    <style>
        .page-list .pagination {float:left;}
        .page-list .pagination span {cursor: pointer;}
        .page-list .pagination .separate span{cursor: default; border-top:none;border-bottom:none;}
        .page-list .pagination .separate span:hover {background: none;}
        .page-list .page-total {float:left; margin: 25px 20px;}
        .page-list .page-total input, .page-list .page-total select{height: 26px; border: 1px solid #ddd;}
        .page-list .page-total input {width: 40px; padding-left:3px;}
        .page-list .page-total select {width: 50px;}
    </style>
</head>
<body ng-controller="testController">

<tm-pagination conf="paginationConf"></tm-pagination>

<script src="../lib/angularjs/1.2.22/angular.min.js"></script>
<script src="../src/pagination/tm.pagination.js"></script>
<script>
    angular.module('myApp', ['tm.pagination']).controller('testController', function($scope){
        /**
         * I'm not good at English, wish you you catch what I said And help me improve my English.
         *
         * A lightweight and useful pagination directive
         * conf is a object, it has attributes like below:
         *
         * currentPage: Current page number, default 1
         * totalItems: Total number of items in all pages
         * itemsPerPage:  number of items per page, default 15
         * onChange: when the pagination is change, it will excute the function.
         *
         * pagesLength: number for pagination size, default 9
         * perPageOptions: defind select how many items in a page, default [10, 15, 20, 30, 50]
         *
         */
        $scope.paginationConf = {
            currentPage: 1,
            totalItems: 8000,
            itemsPerPage: 15,
            pagesLength: 15,
            perPageOptions: [10, 20, 30, 40, 50],
            onChange: function(){

            }
        };
    })
</script>
</body>
</html>

常用方法

对象中的属性也很简单

几个特殊的重点说明一下:

下面分别是设置为9和15分别的效果

默认显示的时候是这样

你可以通过perPageOptions = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

把他变成这样的。(可能你也看到了一个问题,为什么我们的数据中没有15,而这里多出一个15,原因是我们itemsPerPage = 15;设置为15了,如果你改成20,就不会有些问题了,程序很智能的帮你解决判断了)

实战部分

接下来,我会继续写文章实战这个好用的分页组件,此方写的稍凌乱,是因为我的头脑有点痛。有时间我再整理一下。

特别提示

请认真看下一篇文章,你会有更好的了解。下载代码时请从github上下载https://github.com/miaoyaoyao/AngularJs-UI github已经修复了一些分页以前存在的问题。

分页实战文章:AngularJs创建自己的Grid–Grid本应如此灵活(3)
上一篇文章:拒绝垃圾grid–用angularjs创建自己的grid(1)

Yoyo 「二是一种不三不四的态度」

男 1990.12.22 429660248@qq.com

47条回应:“AngularJs创建自己的Grid–分页组件(2)”

  1. 小白说道:

    您好,我想问一下,我用的是您的分页插件,我现在想在每次分页变化完之后加一个回调函数,去操作已经生成的对象。不知道您是否有什么方法可以给说一下?望回复,十分感谢!!!

  2. def说道:

    BUG仍然存在

  3. ck说道:

    onchange里面执行两次有没有大神告诉我怎么解决

  4. 越越说道:

    我现在会的也是 $http get获取数据

  5. 越越说道:

    你好 你这是怎么截数据啊 我是刚开始接触 web前端 不太了解!!

  6. ALLFORONE说道:

    很好,效果酷炫

  7. xiaoming说道:

    改好了么

    • Yoyo说道:

      改好了,请用github那个版本。https://github.com/miaoyaoyao/AngularJs-UI。如有问题微信加18516290800

  8. 忘记姓名说道:

    我的qq是429660248

  9. 马飞飞说道:

    楼主,我这边用的过程中也遇到 多次重复发ajax请求的问题 请问怎么解决?我这边没绑定 onchange事件 我的qq :842966847 方便的话 可以告诉我下 谢谢!

    • 忘记姓名说道:

      我一般直接监控属性,而不是用onchange,有时间我再改写下。

      • 小白说道:

        您好,我想问一下,我用的是您的分页插件,我现在想在每次分页变化完之后加一个回调函数,去操作已经生成的对象。不知道您是否有什么方法可以给说一下?望回复,十分感谢!!!

  10. Alice杨一一说道:

    这个item是从后台一次性获取还是根据当前页码来分批获取数据?如果是服务端分页有没有好的方法推荐??

  11. 薛先生说道:

    问一下,配合条件搜索时,数据无变化,无法触发onchange事件。如何解决?

发表评论

电子邮件地址不会被公开。 必填项已用*标注