ASP.NET使用JQuery DataTables使用說明

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

okay，先不管那個將儲存我們奧斯卡提名的資料編碼對象。現在，我們有更有趣的事情，讓我們先在.aspx頁面增加一些標籤，讓這個東西得以運行。首先，在頁面的<head>部分添加預設樣式表的連結，以及我們的jquery javascript檔案連結。如下：

<link rel="stylesheet" href="Datatables/css/demo_table.css"type="text/css" />

<script type="text/javascript" src="Datatables/js/jquery.js"></script>

<script type="text/javascript" src="Datatables/js/jquery.dataTables.js"></script>

然後，讓我們添加 Repeater，記住，JQuery的DataTables神奇之處在於，他們可以操作任何HTML表額。事實上，他們的網站表明DataTables，“可以給任何HTML表添加進階互動控制”，因此，我們可以將一個表嵌入到我們的Repeater。我猜，大家之前應該都接觸（如果你閱讀了上一篇文章）過Repeaters和tables，所以我下面的代碼，是將表格結構嵌入到Repeater，你可以將下面的代碼放到form下，或者指定的 <div>內。

<asp:Repeater ID="rptOscarNominees" runat="server">

<HeaderTemplate>

<table id="tblOscarNominees" cellpadding="0" cellspacing="0" border="0" class="display">

<thead>

<tr>

<th>Movie</th>

<th>Lead Actor</th>

<th>Lead Actress</th>

<th>Director</th>

</tr>

</thead>

<tbody>

</HeaderTemplate>

<ItemTemplate>

<tr>

<td><%

# Eval("MovieTitle")

%></td>

<td><%

# Eval("LeadingActor")

%></td>

<td><%

# Eval("LeadingActress")

%></td>

<td><%

# Eval("Director")

%></td>

</tr>

</ItemTemplate>

<FooterTemplate>

</tbody>

</table>

</FooterTemplate>

</asp:Repeater>

正如你所看到的，我們的列名放在了<th>標籤裡，我們的資料繫結元素放在<td>標籤裡。DataTables庫會很好的處理這一段代碼。說到DataTables，要在文檔的<head>部分添加JQuery代碼，事實上，我們已經在前幾分鐘添加了<script>的連結。（As you can see, our column names are within <th> tags, and our databound elements are within <td> tags. The DataTables library will take care of being the brains of this operation. Speaking of the DataTables, now would be a good time to add the actual JQuery code to the <head> section of this document. In fact, place the following code directly underneath our <script> links that we added a few minutes ago.）

<script type="text/javascript">

$(document).ready(function() {

$('#tblOscarNominees').dataTable({ "oLanguage": { "sSearch": "Search the nominees:" },

"iDisplayLength": 10,

"aaSorting": [[0, "asc"]]});

});

</script>

上面的代碼可以讓tblOscarNominees表格成為DataTable，並設定一些屬性。

在這個例子裡面，你也許會想，這個“oLanguage and sSearch”屬性允許我們在指定搜尋欄文本，這個“iDisplayLength”屬性可以設定預設的顯示行數。如果你查看 DataTables網站，這個外掛程式有許多可以設定的屬性。

好了，最後，我們需要把資料繫結到我們的Repeater上，將Default.aspx.cs的codebehind的class返回給，下面的代碼，我們對我們提名名單上增加了“Milk”，我們需要設定資料來源並綁定到repeater。

rptOscarNominees.DataSource = nominees;

rptOscarNominees.DataBind();

運行這個網站，會彈出如下所示的頁面：

繼續，輸入搜尋的東西，沒有傳入伺服器，排序列表，方便快捷。分頁沒有自訂代碼，幾年前，這個外掛程式節省了我大量的時間，我超級喜愛它。

現在，請記住，這是一個非常簡單的例子，僅僅是練練手（just to help you get your hands around the technology）。但是要使用這個例子，你可以調整樣式表使表格更叫漂亮，並在你的日常開發中使用。我們希望，這個驚奇的外掛程式，讓你在你的顧客面前成為英雄。乾杯！（

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

ASP.NET使用JQuery DataTables使用說明

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support