Asp. NET use jquery DataTables usage instructions

Okay, first of all, ignore the data-encoding object that will save our Oscar nomination. Now that we have something more interesting, let's add some labels to the. aspx page to let this thing run. First, add a link to the default style sheet in the

<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>

Then, let's add Repeater, and remember that the magic of jquery DataTables is that they can manipulate any HTML table amount. In fact, their site says DataTables, "You can add advanced interaction control to any HTML table," So we can embed a table in our repeater. I guess everyone should be in touch (if you read the previous article) over repeaters and tables, so my next code is to embed the table structure into repeater, you can put the following code under the form, or specify <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 >

As you can see, our column names are in the <th> tag, and our data binding elements are placed in <td> tags. The DataTables library will handle this piece of code very well. Speaking of DataTables, to add jquery code to the

<script type="Text/javascript">

$ (document). Ready (function() {

$ (' #tblOscarNominees '"olanguage""Ssearch""Search the nominees:" },

"Idisplaylength": 10,

"Aasorting" "ASC"]]});

});

</script>

The code above can make the Tbloscarnominees table a DataTable and set some properties.

In this example, you might think that this "olanguage and Ssearch" attribute allows us to specify the text of the search bar, and the "Idisplaylength" attribute can set the default number of rows to be displayed. If you look at the DataTables Web site, this plugin has a number of properties that you can set.

Well, finally, we need to bind the data to our repeater and return the Default.aspx.cs codebehind class to the code below, we added "Milk" to our nomination list, We need to set up a data source and bind to repeater.

Rptoscarnominees.datasource = nominees;

Rptoscarnominees.databind ();

Running this website will pop up the following page:

Go ahead, enter the search for things, no incoming servers, sorted lists, convenient and quick. Pagination does not have custom code, a few years ago, this plugin saved me a lot of time, I love it.

Now, keep in mind that this is a very simple example of just practicing practicing (just to help your get your hands around the technology). But to use this example, you can adjust the stylesheet to make the table more beautiful and use it in your daily development. We hope that this amazing plugin will make you a hero in front of your customers. Cheers! （