Convert to jquery datatables

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.