Datatable learning notes-example application [2]

Source: Internet
Author: User
Tags html header

In the morning, I summarized the basics, variables, and functions of a datatable. Generally, only variables and functions in the ults namespace are used. This afternoon I studied some examples and shared some basic knowledge about datatable.

You can download the latest datatable plug-in on the datatable official website. The size is only 2.33 MB and the latest version is 1.9.4. After decompression, you can see the following folder structure:

Here, docs is the datatable API documentation (which contains the datatable namespace, static variables, and static functions). Examples is an example of datatable, which is very useful.

Extras is a feature developed by other developers. To use these features, you need to reference and rewrite the corresponding JS file.

Media contains the JS files, image files, and CSS that are generally required for development, as shown in. The SRC folder contains the split datatablejs files, however, the JS file does not contain any warning, so do not touch it unless you are familiar with it. In unit_testing, there are a lot of PHP files in it, I have never learned, no.

The file in scripts can also be ignored. Which files should we reference for development,

JS files include

Media/JS/jquery. js (you must first reference the jquery. js file and then reference the JS file of datatable)

Media/JS/jquery. datatables. Min. js (of course, jquery. datatables. js can be referenced, but the former is compressed and smaller)

CSS files include:

Media/CSS/jquery.datatables_themeroller.css

Media/CSS/jquery.datatables.css

Of course, you can also use demo.css under csswith CSS in the plug-in, but you 'd better modify it yourself or use jqueryui to look better. Below I will show how to reference jqueryui and what files to reference

Images files include:

Directly copy the images folder and introduce the following file structure (developed by apanta studio)

Basically, this is enough. If you want to beautify this plug-in and use jqueryui, you also need to introduce imagesand jquery-ui-1.8.21.custom.css under jqueryui/css( my version is this), and the table will look pretty, but I suggest you write it by yourself, or use its demo and jqueryui CSS to spell it out. If you have time, I will write one and share it with you.

In the past, the HTML header was fixed. At that time, I also had no idea about CSS. I just reviewed the elements with chorme and found that this CSS was really messy. Okay, well, I should write another one, by the way, I would like to share with you the following:

View code

 /* * File: datatable_lp.css * Description: CSS descriptions for datatables demo pages * Author: tonylp * created: 2013-3-2 * language: CSS ** note: short for jquery-ui-1.8.21.custom.css * include ui-bg_highlight-soft_100_deedf7_1x100.png * ui-bg_glass_80_d7ebf9_1x400.png * ui-icons_3d80b3_256x240.png * copyright 2013 tonylp. all rights reserved.  */  . UI-helper-Clearfix: before,. UI-helper-Clearfix: After { Content : "" ; Display : Table ;}. UI-helper-Clearfix: After { Clear : Both ;} . UI-helper-Clearfix { Zoom : 1 ;} . UI-widget-Header { Border : 1px solid # aed0ea ; Background : # Deedf7 URL (../images/ui-bg_highlight-soft_100_deedf7_1x100.png) 50% 50% repeat-x ;Color : #222222 ; Font-weight : Bold ; Font-family : Lucida Grande, lucida SANS, Arial, sans-serif ; Font-size : 1em ; /*  If you think the font is too literary, you can delete it directly.  */ } . UI-state-default,. UI-widget-content. UI-state-default,. UI-widget-header. UI-state-Default { Border : 1px solid # aed0ea ; Background : # D7ebf9 URL (../images/ui-bg_glass_80_d7ebf9_1x400.png) 50% 50% repeat-x ; Color : # 2779aa ;} . UI-state-default. UI-icon { Background-Image : URL (../images/ui-icons_3d80b3_256x240.png) ;} Ui-icon-carat-2-n-s {Background-Position : -128px 0 ;} . UI-icon { Width : 16px ; Height : 16px ; Background-Image : URL (../images/ui-icons_72a7cf_256x240.png) ;} Ui-icon-triangle-1-s { Background-Position : -64px-16px ;}Ui-icon-triangle-1-n { Background-Position : 0-16px ;}

 

Basically, the source code is all taken from jquery-ui-1.8.21.m.m.css. Sorry. If you cannot find these four images for different versions, you can leave a message and I will send an email to you.

The details are described in the source code. The directory structure is as follows:

As follows:

It should be careful enough. I don't want to worry about any problems.

 

For folder analysis, all the files that need to be referenced during use have been completed, and the total size is kb, but many functions can be implemented. The following are some examples, I am also confused by myself, and then I think it is a good record. There may be no rules.

1. Details: Display by page,

"Spaginationtype": "full_numbers"

If no data is written:

2. Note that many variables in the able plug-in are set to true by default during initialization. For example:

"Bpaginate": True,

"Blengthchange": True,

"Bfilter": True,

"Bsort": True,

"Binfo": True,

"Bautowidth": true (this is useful, but be careful, there will be some performance problems)

3.1 sorting: datatable can sort multiple columns, hold down shift, and select columns. If you want to sort multiple items during initialization, you can use: "aasorting": [[0, 'asc '], [1, 'asc']

3.2 change sorting rules (custom sorting rules)

3.3 type sorting, non-Rule sorting (this is a very important feature. Open an article separately to explain in detail the sorting using datatable)

4. to hide a column, set 'bvisable': false. Note the difference between bvisible and bsearchable. If bsearchable: false is set, the filtering function will also be invalid for this column, that is, it is invisible in the real sense. Bvisible can still be accessed.

5. Complex headers (one column with multiple rows and one row with multiple columns) and dynamic headers (this has been implemented in my previous blog post, but I still feel that I can refine it)

The picture is a little longer, and the length is quite long. For sorting, I willArticle.

All of the above are personal original, please reprint the original link attached: http://www.cnblogs.com/tonylp

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: info-contact@alibabacloud.com 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.