Using Pager Control(kevnord) & jquery for DataList in pager & select all checkbox.


在最近的工作上，碰到需要用DataList分頁的功能，但一旦將Datalist分頁後，會造成原來datalist中的checkbox 在使用postback的方式去全選的功能發生錯誤，於是不得不改用Jquery在前端處理checkbox的狀態....雖然會比原來用codebehide的方式複雜，但好處是可以減少postback增加整體效率! 先介紹怎樣使用 kevnord的Pager Control來讓DataList分頁，他是利用PageDataSource 這個類別去完成的.

• Step1 : 在Visual Studio中將CollectionPager.dll加入.net Framework元件後拉到設計視窗內。在CodeBehide的地方設定Datasource, 因為我是用Sqldatasource, 所以我會先轉成Dataview再丟給CollectionPager :

Sub BindDT(ByVal sqlstr As String)
  SqlDataSource1.SelectCommand = sqlstr
  SqlDataSource1.DataBind()
  ViewState("sqlstr") = sqlstr 
  CollectionPager2.DataSource = CType(SqlDataSource1.Select(New System.Web.UI.DataSourceSelectArguments), Data.DataView)         
  CollectionPager2.BindToControl = DataList1 
  CollectionPager2.Visible = True  
  DataList1.DataSource = CollectionPager2.DataSourcePaged   
  DataList1.DataBind() 
End Sub

• 然後在Page_load的地方去呼叫BindDT:

If IsPostBack = True And ViewState("sqlstr") <> Nothing Then

BindDT(ViewState("sqlstr"))

End If

• OK, 大功告成! 如果需要再DataList上下各放一個Pager, 則再多用一個LITERAL Control複製原來的Pager:
• 前端:

• 後端:

  Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
          litTopPager.Text = CollectionPager2.RenderedHtml
          MyBase.Render(writer)
  End Sub