[{"data":1,"prerenderedAt":60},["ShallowReactive",2],{"$f1uigw38j1htwj":3,"recommended":29},{"title":4,"path":5,"date":6,"updated":7,"tags":8,"excerpt":10,"readingMinutes":11,"commentCount":12,"html":13,"comments":14,"next":23,"prev":26},"Design Pattern: Pagination with useful hovering indicators","\u002F2011\u002F03\u002Fdesign-pattern-pagination-with-useful\u002F","2011-03-01T09:20:00.003Z","2012-01-12T11:45:24.256Z",[9],"programming","Lots of websites that have catalogs use pagination. This makes sense, as it makes the content fit on the screen and it saves resources on the server. Personally, I hate pagination. I much prefer sites where you can…",1,2,"\u003Cp>Lots of websites that have catalogs use pagination. This makes sense, as it makes the content fit on the screen and it saves resources on the server.\u003C\u002Fp>\n\u003Cp>Personally, I hate pagination. I much prefer sites where you can scroll down and new content is automatically loaded. Smart, sexy, elegant. But suppose the items are ordered by price and the first 200 items are outside of the user's budget. Suddenly pagination makes sense as the user wants to skip a lot of items. The thing is, the user has no clue on which page the items that he\u002Fshe can afford start, so most users will use a simple binary search that takes them on average O(log n) time.\u003C\u002Fp>\n\u003Cp>This is quite irritating. Each step takes about 3 seconds (click, fetch the page, inspect prices) and there are log n steps, where n is the number of pages. I thought this process could be greatly improved by showing the price range on each page in a popup hint simply by hovering.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fimages\u002F2011\u002F03\u002Fdesign-pattern-pagination-with-useful\u002F67c1cc74-screenshot-1.png\" alt=\"\" loading=\"lazy\">\u003C\u002Fp>\n\u003Cp>Implemented at: \u003Ca href=\"http:\u002F\u002Fwww.datnarrenschip.com\u002F\">www.datnarrenschip.com\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>As you can see: the users can hover over the page numbers to see the price of the first and last product on that page. Quite useful and impressive, IMHO. Built with simple css and jQuery. I find that on average, the preferred price range is found within 2 seconds.\u003C\u002Fp>\n\u003Cp>I suggest you use it for your own projects, and if you do, post a comment! I'd love to hear. There are no patents as far as I know and I certainly didn't get one ;) Don't forget that your users will probably want to sort on multiple fields, in which case you probably want to show different hints for  each field.\u003C\u002Fp>\n",[15,19],{"author":16,"date":17,"html":18},"Emeka","2012-01-11T23:12:55.569+01:00","Link to lib you "invent"",{"author":20,"date":21,"html":22},"Jouke Waleson","2012-01-12T08:12:16.287+01:00","It's not a library, it's a design pattern. The implementation will vary greatly depending on the underlying system.",{"title":24,"path":25},"NS api - hij is er!","\u002F2011\u002F03\u002Fns-api-hij-is-er\u002F",{"title":27,"path":28},"Thinkpad T400 immeadiately resumes from suspend after Ubuntu upgrade","\u002F2011\u002F02\u002Fthinkpad-t400-immeadiately-resumes-from\u002F",[30,35,40,43,47,50,53,57],{"title":31,"path":32,"note":33,"series":34},"Mapping out Dark Code","\u002F2026\u002F03\u002Fmapping-out-dark-code\u002F","2026",false,{"title":36,"path":37,"note":38,"series":39},"The software that I love","\u002F2022\u002F10\u002Fthe-software-that-i-love\u002F","Series · 36 posts",true,{"title":41,"path":42,"note":33,"series":34},"Navigating the Fog of War: Age of Empires, AI Agents, and the Rise of Dark Code","\u002F2026\u002F05\u002Fnavigating-fog-of-war-age-of-empires-ai\u002F",{"title":44,"path":45,"note":46,"series":34},"The Future of Programming Systems - four thoughts","\u002F2024\u002F09\u002Fthe-future-of-programming-systems-four\u002F","2024",{"title":48,"path":49,"note":46,"series":34},"Always Optimize the Feedback Loop","\u002F2024\u002F07\u002Falways-optimize-feedback-loop\u002F",{"title":51,"path":52,"note":46,"series":34},"\"Security Is Our Top Priority\" is BS","\u002F2024\u002F07\u002Fsecurity-is-our-top-priority-is-bs\u002F",{"title":54,"path":55,"note":56,"series":34},"10x teams","\u002F2025\u002F02\u002F10x-teams\u002F","2025",{"title":58,"path":59,"note":56,"series":34},"Hiring, from the Other Side","\u002F2025\u002F10\u002Fhiring-from-other-side\u002F",1792876809255]