GithubHelp home page GithubHelp logo

angular-paging's Introduction

###Angular Paging

A directive to aid in paging large datasets while requiring the bare minimum of actual paging information.
Demo Available At: http://brantwills.github.io/Angular-Paging/

####Background

I often find myself paging across millions of rows even after I'd allowed users some level of database filtering (say by date range or name).
I also find myself forced into positions with large tables where normalization was not considered, or to be fair, the input into the database itself is just garbage or very "log based".
These two limitations have pushed me to develop a reusable paging scheme which just happens to drop nicely into AngularJS.


####Programmatic Goals

I wanted to create an angular directive I could easily reuse and tie back into some form of controller.
I also wanted to include as little "paging" information as possible.
There are some attributes for handling CSS classes however, I settled on the required input being:

  1. What page am I currently viewing
  2. How many items in the list to display on a page
  3. What is the total count of items in my list

####Visual Goals

I wanted to develop a paging display which pulls away from the typical < << first 1 2 3 4 [drop-down] last >> >.
In my experience users never really have a true need to zip to the 9th page 2nd result and if they do they have probably bookmarked the actual URL or more directly they have found the result through "better" filtering.

I've found the the best representation allowed the user to quickly move next or previous page, as this meets the immediate need for paging, while still allowing them to "get out of jail freely" by moving to the first or last page instantly. So visually I selected the common pattern 1 2 ... 7 8 9 ... 100 101 where the count inside the ellipsis changes as the pages increase or decrease.


####Known Issues

  1. None right now but I'm sure they are out there!

####License

MIT Licensed - with the exception that you star this repo :)


Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.