LoginSignup
1
2

More than 5 years have passed since last update.

ASP.NETの<asp:Table>にjQueryのDataTablesを適用する。

Posted at

jQueryのDataTablesを使うのは、対象の<table>が<thead>と<tbody>の子を持ち、id="~"class="display"の属性を持たなければなりません。
なので、<asp:Table>にID="Table1" CssClass="display"を持たせ、<thead>を持たせるためにheaderRow.TableSection = TableRowSection.TableHeaderを設定しています。

html
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://www.doctorsim.com/css/ui-lightness/jquery-ui-1.7.2.custom.css">
<link rel="stylesheet" type="text/css" href="http://www.datatables.net/release-datatables/media/css/demo_table_jui.css">

...
<asp:Table cellpadding="0" cellspacing="0" border="0" ID="Table1" CssClass="display" style="width:980px" runat="server">
</asp:Table>
...

vb.net

' テーブルの中身をクリアにしておく。
Table1.Rows.Clear()

' テーブルにヘッダをつける。
Dim headerRow As New TableRow
Dim headerCell As New TableCell
headerRow.TableSection = TableRowSection.TableHeader
headerCell.Text = "HeaderText"
headerRow.Cells.Add(headerCell)

Table1.Rows.Add(headerRow)

' ループしながら、データをテーブルに追加していく。
While cReader.Read()
  Dim row As New TableRow
  Dim cell As New TableCell
  Dim label As New Label
  label.Text = cReader("columnName").ToString()
  cell.Controls.Add(label)
  row.Cells.Add(cell)

  Table1.Rows.Add(row)  
End While

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2