TAILIEUCHUNG - JQuery: Novice to Ninja- P24
JQuery: Novice to Ninja- P24:No matter what kind of ninja you are—a cooking ninja, a corporate lawyer ninja, or an actual ninja ninja—virtuosity lies in first mastering the basic tools of the trade. Once conquered, it’s then up to the full-fledged ninja to apply that knowledge in creative and inventive ways. | 322 jQuery Novice to Ninja to the wrapper div then back down to the navigation section. This approach lets you apply the same code to any tables that have been structured appropriately chapter_08 08_pagination excerpt 2. Set up the navigation controls var nav Stable .parents .table-wrapper .find .wrapper-paging ul var back li first-child a var next li last-child a We then set the text in the display boxes for the current page and the total length adding one because our counters are zero-based . Next we attach the event handlers for the Previous Next buttons. When these buttons are clicked we call our pagination function with the direction we want to move chapter_08 08_pagination excerpt b .text current 1 span .text numPages 1 back .addClass paging-disabled .click function pagination function pagination The last part of the setup is to limit how many rows the user sees to begin with. The easiest way to do this is to hide all the table rows and show only the rows within the range we re interested in. But how can we select a range of elements with jQuery We could use the lt and gt filters but when it comes time to show say rows 10 to 20 the selectors will get a bit messy. Luckily for us there s the slice action which takes a start index and an end index as parameters and returns only the objects within that range Lists Trees and Tables 323 chapter_08 08_pagination excerpt 3. Show initial rows rows .hide .slice 0 pageLength .show Everything looks in order now our navigation controls are showing the correct page and total and the first page of data is displaying correctly. But our paging buttons have no function yet. We ll add some logic to move the current page and work out whether we should disable buttons if we re at either end of the table chapter_08 08_pagination excerpt 4. Move previous and next if direction previous if current 1 reveal current - 1 .
đang nạp các trang xem trước