Oh, woork yang dimaksud adalah oom woork yang suka ngeblog masalah koding html/css/javascript etc :p ... si om ini pernah posting penggunaan beberapa macam style pada pager yang kalo dijalanin bakalnya seperti dibawah ini ...
Keren kan ? nah lebih keren lagi kalo style diatas bisa diaplikasikan kedalam DataPager control di ASP.NET 3.5 ^^ .. yap, g sulit koq .. cukup dengan 3 langkah mudah.
1. Siapin cemilan
2. Set property DataPager Anda sebagai berikut (dan bind DataPager tersebut misalnya ke ListView) :
1: <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1"
2: PageSize="3" >
3: <Fields>
4: <asp:NextPreviousPagerField
5: ButtonCssClass="command"
6: FirstPageText="« Previous" PreviousPageText="« Previous"
7: RenderDisabledButtonsAsLabels="false"
8: ShowFirstPageButton="false" ShowPreviousPageButton="true"
9: ShowLastPageButton="false" ShowNextPageButton="false" RenderNonBreakingSpacesBetweenControls="False"
10: />
11: <asp:NumericPagerField CurrentPageLabelCssClass="current"
12: NextPreviousButtonCssClass="next"
13: RenderNonBreakingSpacesBetweenControls="False" />
14: <asp:NextPreviousPagerField
15: ButtonCssClass="command"
16: LastPageText="›" NextPageText="Next »" RenderDisabledButtonsAsLabels="false"
17: ShowFirstPageButton="false" ShowPreviousPageButton="false"
18: ShowLastPageButton="false" ShowNextPageButton="true" RenderNonBreakingSpacesBetweenControls="False"
19: />
20: </Fields>
21: </asp:DataPager>
3. Dengan sedikit modifikasi kode CSS
1: #DataPager1 { border:0; margin:0; padding:0; font-size:11px; list-style:none; float:left; } 2: #DataPager1 a { border:solid 1px #9aafe5; margin-right:2px; } 3: #DataPager1 .command { font-weight:bold; display:block; float:left; margin-right:2px; padding:3px 4px;} 4: #DataPager1 .current { background:#2e6ab1; color:#FFFFFF; font-weight:bold; display:block; float:left; padding:4px 6px; margin-right:2px; } 5: #DataPager1 a:link,
6: #DataPager1 a:visited { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:none; } 7: #DataPager1 a:hover { border:solid 1px #0e509e; }
dan tadaaaaaaaaaaaaaaaa ...
Ada 2 style lagi sebetulnya tapi Anda bisa coba sendiri dengan melihat contoh kustomisasi pada kode CSS diatas :D ...
Hope this helps.