pagination.hs

{-|
 - Description: Haskell version
 -              provide the `paginate` function helping to provide a group of buttons
 -              indicating the current page on a list. Maximum 10 buttons are showed.
 -              if the number of pages is higher than 10, we change some buttons by
 -              '...'.
 -
 - Copyright: jcavat, 2017
 - License: WTFPL
 - Stability: experimental
 -
 -
 -}
module Main where

import Prelude
import System.IO

-- | given a number of pages and the active page, return the collections of buttons with their id or '...' if the 
--   number of buttons are greater than 10
paginate :: Int -> Int -> [String]
paginate page activep
    | page == 0                 = []
    | page <= 10                = map show [1..page]
    | page > 10 && activep <= 5 = map show [1..7] ++ [".."] ++ map show [page-1, page]
    | activep >= page -5        = map show [1..2] ++ [".."] ++ map show [page-6..page]
    | otherwise                 = map show [1..2] ++ [".."] ++ map show [activep-1..activep+2] ++ [".."] ++ map show [page-1, page]

mapChar :: String -> String
mapChar xs 
    | length xs == 1 = "  " ++ [head xs]
    | otherwise = " " ++ xs

printStrings xs = mapM_ putStr $ map ( mapChar) xs ++ ["\n"]

-- | Test with some values
main = mapM_ printStrings $ map (paginate n) [1..n]
    where 
        n = 34

pagination.purs

{-|
 - Description: Purescript version
 -              provide the `paginate` function helping to provide a group of buttons
 -              indicating the current page on a list. Maximum 10 buttons are showed.
 -              if the number of pages is higher than 10, we change some buttons by
 -              '...'.
 -
 - Copyright: jcavat, 2017
 - License: WTFPL
 - Stability: experimental
 -
 -
 -}
module Pagination where

import Prelude (map, (==), (<=), ($), show, (>), (&&), (<>), (-), (>=), otherwise, (+))
import Data.Array ((..))
import Data.Show (class Show)

mapToString :: forall a. ( Show a ) => Array a -> Array String
mapToString = map show

-- | given a number of pages and the active page, return the collections of buttons with their id or '...' if the 
--   number of buttons are greater than 10
paginate :: Int -> Int -> Array String
paginate page activep
    | page == 0                 = []
    | page <= 10                = mapToString $ 1..page
    | page > 10 && activep <= 5 = (mapToString $ 1..7) <> [".."] <> (mapToString [page-1, page])
    | activep >= page -5        = (mapToString $ 1..2) <> [".."] <> (mapToString $ (page-6)..page)
    | otherwise                 = (mapToString $ 1..2)
                                    <> [".."]
                                    <> (mapToString $ (activep-1)..(activep+2))
                                    <> [".."]
                                    <> (mapToString [page-1, page])

pagination.ts

/* TypeScript version with lodash.js */

private paginate(activePage, size) : string[] {
  if (size == 0){
    return [];
  } else if (size <= 10) {
    return _.range(1, size+1).map( i => i.toString() );
  } else if (size > 10 && activePage <= 5) {
    return _.range(1, 8)
      .map( i => i.toString() )
      .concat("..")
      .concat( _.range(size -1, size+1).map( i => i.toString() ));
  } else if (activePage >= size -5) {
    return _.range(1, 3)
      .map( i => i.toString() )
      .concat("..")
      .concat( _.range(size -6, size+1).map( i => i.toString() ));
  } else {
    return _.range(1, 3)
      .map( i => i.toString() )
      .concat("..")
      .concat( _.range(activePage-1, activePage+3).map( i => i.toString() ))
      .concat("..")
      .concat( _.range(size-1, size+1) );
  }
}

I provide an Angular2 component to illustrate the purpose : https://embed.plnkr.co/ggTVQD2NhtfhpJRNPT80/