首頁 > 開發者 > ASP

ASP.NET使用JQuery DataTables—基礎

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
 代碼如下 複製代碼

<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();

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

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

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

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： 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