Cara menggunakan ANGULAR-DATATABLES pada JavaScript
Ngày đăng:28/09/2022
Trả lời:0
Lượt xem:189
When using tables to display data, you will often wish to display column information in groups. DataTables fully supports colspan and rowspan in the table's header, assigning the required order listeners to the TH element suitable for that column.
Each column must have one TH cell which is unique to it for the listeners to be added. By default DataTables will use the bottom unique cell for the column to attach the order listener, if more than one cell for a column if
found. The orderCellsTopDT option can be used to tell DataTables to use the top cell if you prefer.
The example shown below has two sets of grouped information, grouped by colspan in the header.
Name
HR Information
Contact
Position
Salary
Office
Extn.
E-mail
Name
Position
Salary
Office
Extn.
E-mail
Tiger Nixon
System Architect
$320,800
Edinburgh
5421
Garrett Winters
Accountant
$170,750
Tokyo
8422
Ashton Cox
Junior Technical Author
$86,000
San Francisco
1562
Cedric Kelly
Senior Javascript Developer
$433,060
Edinburgh
6224
Airi Satou
Accountant
$162,700
Tokyo
5407
Brielle Williamson
Integration Specialist
$372,000
New York
4804
Herrod Chandler
Sales Assistant
$137,500
San Francisco
9608
Rhona Davidson
Integration Specialist
$327,900
Tokyo
6200
Colleen Hurst
Javascript Developer
$205,500
San Francisco
2360
Sonya Frost
Software Engineer
$103,600
Edinburgh
1667
Jena Gaines
Office Manager
$90,560
London
3814
Quinn Flynn
Support Lead
$342,000
Edinburgh
9497
Charde Marshall
Regional Director
$470,600
San Francisco
6741
Haley Kennedy
Senior Marketing Designer
$313,500
London
3597
Tatyana Fitzpatrick
Regional Director
$385,750
London
1965
Michael Silva
Marketing Designer
$198,500
London
1581
Paul Byrd
Chief Financial Officer (CFO)
$725,000
New York
3059
Gloria Little
Systems Administrator
$237,500
New York
1721
Bradley Greer
Software Engineer
$132,000
London
2558
Dai Rios
Personnel Lead
$217,500
Edinburgh
2290
Jenette Caldwell
Development Lead
$345,000
New York
1937
Yuri Berry
Chief Marketing Officer (CMO)
$675,000
New York
6154
Caesar Vance
Pre-Sales Support
$106,450
New York
8330
Doris Wilder
Sales Assistant
$85,600
Sidney
3023
Angelica Ramos
Chief Executive Officer (CEO)
$1,200,000
London
5797
Gavin Joyce
Developer
$92,575
Edinburgh
8822
Jennifer Chang
Regional Director
$357,650
Singapore
9239
Brenden Wagner
Software Engineer
$206,850
San Francisco
1314
Fiona Green
Chief Operating Officer (COO)
$850,000
San Francisco
2947
Shou Itou
Regional Marketing
$163,000
Tokyo
8899
Michelle House
Integration Specialist
$95,400
Sidney
2769
Suki Burks
Developer
$114,500
London
6832
Prescott Bartlett
Technical Author
$145,000
London
3606
Gavin Cortez
Team Leader
$235,500
San Francisco
2860
Martena Mccray
Post-Sales support
$324,050
Edinburgh
8240
Unity Butler
Marketing Designer
$85,675
San Francisco
5384
Howard Hatfield
Office Manager
$164,500
San Francisco
7031
Hope Fuentes
Secretary
$109,850
San Francisco
6318
Vivian Harrell
Financial Controller
$452,500
San Francisco
9422
Timothy Mooney
Office Manager
$136,200
London
7580
Jackson Bradshaw
Director
$645,750
New York
1042
Olivia Liang
Support Engineer
$234,500
Singapore
2120
Bruno Nash
Software Engineer
$163,500
London
6222
Sakura Yamamoto
Support Engineer
$139,575
Tokyo
9383
Thor Walton
Developer
$98,540
New York
8327
Finn Camacho
Support Engineer
$87,500
San Francisco
2927
Serge Baldwin
Data Coordinator
$138,575
Singapore
8352
Zenaida Frank
Software Engineer
$125,250
New York
7439
Zorita Serrano
Software Engineer
$115,000
San Francisco
4389
Jennifer Acosta
Junior Javascript Developer
$75,650
Edinburgh
3431
Cara Stevens
Sales Assistant
$145,600
New York
3990
Hermione Butler
Regional Director
$356,250
London
1016
Lael Greer
Systems Administrator
$103,500
London
6733
Jonas Alexander
Developer
$86,500
San Francisco
8196
Shad Decker
Regional Director
$183,000
Edinburgh
6373
Michael Bruce
Javascript Developer
$183,000
Singapore
5384
Donna Snider
Customer Support
$112,000
New York
4226
Javascript
HTML
CSS
Ajax
Server-side script
The Javascript shown below is used to initialise the table shown in this example:
In addition to the above code, the following Javascript library files are loaded for use in this example:
../../media/js/jquery.js
../../media/js/jquery.dataTables.js
The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:
The following CSS
library files are loaded for use in this example to provide the styling of the table:
../../media/css/jquery.dataTables.css
This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.
The script used to perform the server-side processing for this
table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.