Convert to jquery datatables

The datatables plug-in of jquery is an excellent table plug-in that provides functions such as table sorting, browser paging, server paging, filtering, and formatting. The datatables website also provides a large number of demos and detailed documentation for ease of learning and use.

First, you need to http://www.datatables.net/download this script Library to the datatables website,

The current version is 1.7.5. The downloaded compressed package uses jquery 1.4.4. Jquery1.5.1 has been released, so the latest jquery 1.5.1 is used here.

Then, add jquery references to the webpage, and then add datatables references.

For datatables, the table must be described using thead and tbody, as shown below,

?

< Table Cellpadding = "0" Cellspacing = "0" Border = "0" Class = "Display" ID = "Example" > < Thead > < Tr > < Th > Rendering Engine </ Th > < Th > Browser </ Th > < Th > Platform (s) </ Th > < Th > Engine Version </ Th > < Th > CSS grade </ Th > </ Tr > </ Thead > < Tbody > < Tr Class = "Odd gradex" > < TD > Trident </ TD > < TD > Internet Explorer 4.0 </ TD > < TD > Win 95 + </ TD > < TD Class = "Center" > 4 </ TD > < TD Class = "Center" > X </ TD > </ Tr >

If there is no thead, an error will be reported.

The simplest way to use is the zero-configuration method.

?

/* * Example init */$ (Document). Ready (Function(){$ ('# Example'). Datatable ();});

Table Effect

Note: The red box indicates the four default settings, which are used to select the number of rows per page, table filters, table information and form feed.

Several default parameter settings are used. In datatables, the prefix of the parameter name is used to describe the data type of the parameter. Obviously, B indicates the boolean type, I indicates the integer type, and s indicates the string type.

• Bpaginate: whether to pagination. The default value is true.
• Idisplaylength: the number of lines per page. default number per page: 10
• Spaginationtype: Paging style. Two built-in methods are supported: two_button and full_numbers. two_button is used by default.
• Blengthchange: whether to allow users to select the number of lines per page after the page is displayed in a drop-down list. The number of rows is 10, 25, 50,100. This setting must be supported by bpaginate. The default value is true.
• Bfilter: Enables or disables data filtering. The default value is true. Note: If you use the filter function but want to disable the default filter input box, use sdom.
• Binfo: Allows or disables the display of table information. The default value is true.

You can also change these settings by passing an initialization parameter object. For example, the following example sets the number of rows per page to 20.

? $ ( Function (){ $ ( "# Example" ). Datatable ( { Idisplaylength: 20 } ); }); Collection for query, from: http://www.cnblogs.com/haogj/archive/2011/03/04/1971328.html