ASP. NET using JQuery DataTables-basics

The code is as follows:	Copy code
<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. Remember, the magic of JQuery's DataTables is that they can operate any HTML table amount. In fact, their website shows DataTables, "you can add advanced interaction control to any HTML table", so we can embed a table into our Repeater. I guess you should have been familiar with Repeaters and tables before (if you have read the previous article), so the code below is to embed the table structure into Repeater, you can put the following code under the form or the specified <div>.

The code is as follows:

Copy code

<Asp: Repeater ID = "rptoscloud minees" 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 placed in the <th> label, and our data binding elements are placed in the <td> label. The DataTables library will handle this piece of code very well. Speaking of DataTables, we need to add JQuery code in the

The code is as follows:	Copy code
<Script type = "text/javascript"> $ (Document). ready (function (){ $ ('# Tbloscloud minees'). dataTable ({"oLanguage": {"sSearch": "Search the nominees :"}, "IDisplayLength": 10, "AaSorting": [[0, "asc"]}); }); </Script>

The above code makes the tbloscloud minees table a DataTable and sets some attributes.

In this example, you may think that the "oLanguage and sSearch" attribute allows us to specify the text in the search bar. The "iDisplayLength" attribute can set the default number of lines to be displayed. If you view the DataTables website, this plug-in has many attributes that can be set.

Okay. Finally, we need to bind the data to our Repeater and set Default. aspx. the class of cs codebehind is returned. The following code adds "Milk" to our nomination list. We need to set the data source and bind it to repeater.

The code is as follows:	Copy code
Rptoscw.minees. DataSource = nominees; Rptoscw.minees. DataBind ();

When you run this website, the following page is displayed:

Continue: enter the search items. The server is not input, and the sorting list is convenient and quick. There is no custom code for paging. A few years ago, this plug-in saved me a lot of time and I love it.