การใช้งาน dataTable plugin jquery in ASP.NET + Jquery UI Style

ในบทความนี้จะเป็นการแนะนำการใช้ dataTable plugin ของ Jquery ร่วมกับ Jquery UI เพื่อความสวยงาม
และ การดึงข้อมูลแบบ Ajax ผ่าน jquery ด้วย ASP.NET ครับ
เริ่มแรก ต้อง
Add stylesheet Jquery UI

  



Add Jquery function







Html code






รอสักครู่.....


create file Handler.ashx


Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

Dim trip As String = ""
trip = context.Request("tripno")

Dim str As String = "select client_c,cuscode,ordno,tripno,zoneno from DDT_tracking where tripno = '" & Trim(trip) & "' "
'clsdb.getjsonddt("select client_c,cuscode,ordno,tripno,zoneno from DDT_tracking where tripno = '1026983' ")

Dim Ds As DataSet
Ds = clsdb.GetdatasetDDT(str)
Dim Dt As DataTable = Ds.Tables(0)
Dim i As Integer = 0
Dim strReturnData As String
strReturnData = " " & _
" <table cellpadding='0' cellspacing='0' border='0' class='display' id='example'> " & _
"<thead>" & _
"<tr><th>No.</th> <th width='20%'>Rendering engine</th>" & _
" <th width='25%'>Browser</th>" & _
"<th width='25%'>Platform(s)</th>" & _
"<th width='15%'>Engine version</th>" & _
"<th width='15%'>CSS grade</th> " & _
"<th width='15%'><input type='checkbox' name='checkall' id='checkall' text='All' ></th></tr> " & _
"</thead>" & _
"<tbody>"

For i = 0 To Dt.Rows.Count - 1
strReturnData &= " <tr> <td></td>"
strReturnData &= " <td>" & Trim(Dt.Rows(i)("client_c").ToString) & "</td> "
strReturnData &= " <td>" & Trim(Dt.Rows(i)("cuscode").ToString) & "</td> "
strReturnData &= " <td>" & Trim(Dt.Rows(i)("ordno").ToString) & "</td> "
strReturnData &= " <td>" & Trim(Dt.Rows(i)("tripno").ToString) & "</td> "
strReturnData &= " <td>" & Trim(Dt.Rows(i)("zoneno").ToString) & "</td> "
strReturnData &= " <td><input type='checkbox' name='check_" & Trim(Dt.Rows(i)("ordno").ToString) & "' value='" & Trim(Dt.Rows(i)("ordno").ToString) & "' class='dd' ></td> "
strReturnData &= " </tr> "
Next

strReturnData &= " </tbody> " & _
" <tfoot> " & _
" <tr>" & _
"<th>No.</th> <th>Rendering engine</th>" & _
" <th>Browser</th>" & _
"<th>Platform(s)</th>" & _
" <th>Engine version</th>" & _
"<th>CSS grade</th>" & _
"<th>select</th> " & _
"</tr>" & _
"</tfoot>" & _
"</table> "

context.Response.Write(strReturnData)
End Sub

Public Function GetdatasetDDT(ByVal sql As String) As DataSet
Dim Ds As New DataSet()
Try

Connddthq.Open()
Dim da As New OleDbDataAdapter(sql, Connddthq)
da.Fill(Ds)
Connddthq.Close()

Catch ex As Exception
strMsg = "[GetdatasetDDT] err=" & ex.Message.ToString()
End Try
Return Ds

End Function




link ที่เกี่ยวข้อง
http://jquery.com

http://jqueryui.com

http://www.datatables.net



การใช้งาน Datepicker by Jquery UI + ASP.NET


ไม่มีความคิดเห็น: