相关文件:
https://git.coding.net/HULANG-BTB/JQuery.DataTable.js.git
HTML代码:
1 <html> 2 <head> 3 <title>DataTabletitle> 4 <link rel="stylesheet" href="./jquery.dataTables.min.css"> 5 head> 6 <body> 7 <table id="example" class="display" style="width:100%"> 8 <thead> 9 <tr> 10 <th>Nameth> 11 <th>Positionth> 12 <th>Officeth> 13 <th>Ageth> 14 <th>Start dateth> 15 <th>Salaryth> 16 tr> 17 thead> 18 <tbody> 19 <tr> 20 <td>Tiger Nixontd> 21 <td>System Architecttd> 22 <td>Edinburghtd> 23 <td>61td> 24 <td>2011/04/25td> 25 <td>$320,800td> 26 tr> 27 <tr> 28 <td>Garrett Winterstd> 29 <td>Accountanttd> 30 <td>Tokyotd> 31 <td>63td> 32 <td>2011/07/25td> 33 <td>$170,750td> 34 tr> 35 <tr> 36 <td>Ashton Coxtd> 37 <td>Junior Technical Authortd> 38 <td>San Franciscotd> 39 <td>66td> 40 <td>2009/01/12td> 41 <td>$86,000td> 42 tr> 43 <tr> 44 <td>Cedric Kellytd> 45 <td>Senior Javascript Developertd> 46 <td>Edinburghtd> 47 <td>22td> 48 <td>2012/03/29td> 49 <td>$433,060td> 50 tr> 51 <tr> 52 <td>Airi Satoutd> 53 <td>Accountanttd> 54 <td>Tokyotd> 55 <td>33td> 56 <td>2008/11/28td> 57 <td>$162,700td> 58 tr> 59 <tr> 60 <td>Brielle Williamsontd> 61 <td>Integration Specialisttd> 62 <td>New Yorktd> 63 <td>61td> 64 <td>2012/12/02td> 65 <td>$372,000td> 66 tr> 67 <tr> 68 <td>Herrod Chandlertd> 69 <td>Sales Assistanttd> 70 <td>San Franciscotd> 71 <td>59td> 72 <td>2012/08/06td> 73 <td>$137,500td> 74 tr> 75 <tr> 76 <td>Rhona Davidsontd> 77 <td>Integration Specialisttd> 78 <td>Tokyotd> 79 <td>55td> 80 <td>2010/10/14td> 81 <td>$327,900td> 82 tr> 83 <tr> 84 <td>Colleen Hursttd> 85 <td>Javascript Developertd> 86 <td>San Franciscotd> 87 <td>39td> 88 <td>2009/09/15td> 89 <td>$205,500td> 90 tr> 91 <tr> 92 <td>Sonya Frosttd> 93 <td>Software Engineertd> 94 <td>Edinburghtd> 95 <td>23td> 96 <td>2008/12/13td> 97 <td>$103,600td> 98 tr> 99 <tr> 100 <td>Jena Gainestd> 101 <td>Office Managertd> 102 <td>Londontd> 103 <td>30td> 104 <td>2008/12/19td> 105 <td>$90,560td> 106 tr> 107 <tr> 108 <td>Quinn Flynntd> 109 <td>Support Leadtd> 110 <td>Edinburghtd> 111 <td>22td> 112 <td>2013/03/03td> 113 <td>$342,000td> 114 tr> 115 <tr> 116 <td>Charde Marshalltd> 117 <td>Regional Directortd> 118 <td>San Franciscotd> 119 <td>36td> 120 <td>2008/10/16td> 121 <td>$470,600td> 122 tr> 123 <tr> 124 <td>Haley Kennedytd> 125 <td>Senior Marketing Designertd> 126 <td>Londontd> 127 <td>43td> 128 <td>2012/12/18td> 129 <td>$313,500td> 130 tr> 131 <tr> 132 <td>Tatyana Fitzpatricktd> 133 <td>Regional Directortd> 134 <td>Londontd> 135 <td>19td> 136 <td>2010/03/17td> 137 <td>$385,750td> 138 tr> 139 <tr> 140 <td>Michael Silvatd> 141 <td>Marketing Designertd> 142 <td>Londontd> 143 <td>66td> 144 <td>2012/11/27td> 145 <td>$198,500td> 146 tr> 147 <tr> 148 <td>Paul Byrdtd> 149 <td>Chief Financial Officer (CFO)td> 150 <td>New Yorktd> 151 <td>64td> 152 <td>2010/06/09td> 153 <td>$725,000td> 154 tr> 155 <tr> 156 <td>Gloria Littletd> 157 <td>Systems Administratortd> 158 <td>New Yorktd> 159 <td>59td> 160 <td>2009/04/10td> 161 <td>$237,500td> 162 tr> 163 <tr> 164 <td>Bradley Greertd> 165 <td>Software Engineertd> 166 <td>Londontd> 167 <td>41td> 168 <td>2012/10/13td> 169 <td>$132,000td> 170 tr> 171 <tr> 172 <td>Dai Riostd> 173 <td>Personnel Leadtd> 174 <td>Edinburghtd> 175 <td>35td> 176 <td>2012/09/26td> 177 <td>$217,500td> 178 tr> 179 <tr> 180 <td>Jenette Caldwelltd> 181 <td>Development Leadtd> 182 <td>New Yorktd> 183 <td>30td> 184 <td>2011/09/03td> 185 <td>$345,000td> 186 tr> 187 <tr> 188 <td>Yuri Berrytd> 189 <td>Chief Marketing Officer (CMO)td> 190 <td>New Yorktd> 191 <td>40td> 192 <td>2009/06/25td> 193 <td>$675,000td> 194 tr> 195 <tr> 196 <td>Caesar Vancetd> 197 <td>Pre-Sales Supporttd> 198 <td>New Yorktd> 199 <td>21td> 200 <td>2011/12/12td> 201 <td>$106,450td> 202 tr> 203 <tr> 204 <td>Doris Wildertd> 205 <td>Sales Assistanttd> 206 <td>Sidneytd> 207 <td>23td> 208 <td>2010/09/20td> 209 <td>$85,600td> 210 tr> 211 <tr> 212 <td>Angelica Ramostd> 213 <td>Chief Executive Officer (CEO)td> 214 <td>Londontd> 215 <td>47td> 216 <td>2009/10/09td> 217 <td>$1,200,000td> 218 tr> 219 <tr> 220 <td>Gavin Joycetd> 221 <td>Developertd> 222 <td>Edinburghtd> 223 <td>42td> 224 <td>2010/12/22td> 225 <td>$92,575td> 226 tr> 227 <tr> 228 <td>Jennifer Changtd> 229 <td>Regional Directortd> 230 <td>Singaporetd> 231 <td>28td> 232 <td>2010/11/14td> 233 <td>$357,650td> 234 tr> 235 <tr> 236 <td>Brenden Wagnertd> 237 <td>Software Engineertd> 238 <td>San Franciscotd> 239 <td>28td> 240 <td>2011/06/07td> 241 <td>$206,850td> 242 tr> 243 <tr> 244 <td>Fiona Greentd> 245 <td>Chief Operating Officer (COO)td> 246 <td>San Franciscotd> 247 <td>48td> 248 <td>2010/03/11td> 249 <td>$850,000td> 250 tr> 251 <tr> 252 <td>Shou Itoutd> 253 <td>Regional Marketingtd> 254 <td>Tokyotd> 255 <td>20td> 256 <td>2011/08/14td> 257 <td>$163,000td> 258 tr> 259 <tr> 260 <td>Michelle Housetd> 261 <td>Integration Specialisttd> 262 <td>Sidneytd> 263 <td>37td> 264 <td>2011/06/02td> 265 <td>$95,400td> 266 tr> 267 <tr> 268 <td>Suki Burkstd> 269 <td>Developertd> 270 <td>Londontd> 271 <td>53td> 272 <td>2009/10/22td> 273 <td>$114,500td> 274 tr> 275 <tr> 276 <td>Prescott Bartletttd> 277 <td>Technical Authortd> 278 <td>Londontd> 279 <td>27td> 280 <td>2011/05/07td> 281 <td>$145,000td> 282 tr> 283 <tr> 284 <td>Gavin Corteztd> 285 <td>Team Leadertd> 286 <td>San Franciscotd> 287 <td>22td> 288 <td>2008/10/26td> 289 <td>$235,500td> 290 tr> 291 <tr> 292 <td>Martena Mccraytd> 293 <td>Post-Sales supporttd> 294 <td>Edinburghtd> 295 <td>46td> 296 <td>2011/03/09td> 297 <td>$324,050td> 298 tr> 299 <tr> 300 <td>Unity Butlertd> 301 <td>Marketing Designertd> 302 <td>San Franciscotd> 303 <td>47td> 304 <td>2009/12/09td> 305 <td>$85,675td> 306 tr> 307 <tr> 308 <td>Howard Hatfieldtd> 309 <td>Office Managertd> 310 <td>San Franciscotd> 311 <td>51td> 312 <td>2008/12/16td> 313 <td>$164,500td> 314 tr> 315 <tr> 316 <td>Hope Fuentestd> 317 <td>Secretarytd> 318 <td>San Franciscotd> 319 <td>41td> 320 <td>2010/02/12td> 321 <td>$109,850td> 322 tr> 323 <tr> 324 <td>Vivian Harrelltd> 325 <td>Financial Controllertd> 326 <td>San Franciscotd> 327 <td>62td> 328 <td>2009/02/14td> 329 <td>$452,500td> 330 tr> 331 <tr> 332 <td>Timothy Mooneytd> 333 <td>Office Managertd> 334 <td>Londontd> 335 <td>37td> 336 <td>2008/12/11td> 337 <td>$136,200td> 338 tr> 339 <tr> 340 <td>Jackson Bradshawtd> 341 <td>Directortd> 342 <td>New Yorktd> 343 <td>65td> 344 <td>2008/09/26td> 345 <td>$645,750td> 346 tr> 347 <tr> 348 <td>Olivia Liangtd> 349 <td>Support Engineertd> 350 <td>Singaporetd> 351 <td>64td> 352 <td>2011/02/03td> 353 <td>$234,500td> 354 tr> 355 <tr> 356 <td>Bruno Nashtd> 357 <td>Software Engineertd> 358 <td>Londontd> 359 <td>38td> 360 <td>2011/05/03td> 361 <td>$163,500td> 362 tr> 363 <tr> 364 <td>Sakura Yamamototd> 365 <td>Support Engineertd> 366 <td>Tokyotd> 367 <td>37td> 368 <td>2009/08/19td> 369 <td>$139,575td> 370 tr> 371 <tr> 372 <td>Thor Waltontd> 373 <td>Developertd> 374 <td>New Yorktd> 375 <td>61td> 376 <td>2013/08/11td> 377 <td>$98,540td> 378 tr> 379 <tr> 380 <td>Finn Camachotd> 381 <td>Support Engineertd> 382 <td>San Franciscotd> 383 <td>47td> 384 <td>2009/07/07td> 385 <td>$87,500td> 386 tr> 387 <tr> 388 <td>Serge Baldwintd> 389 <td>Data Coordinatortd> 390 <td>Singaporetd> 391 <td>64td> 392 <td>2012/04/09td> 393 <td>$138,575td> 394 tr> 395 <tr> 396 <td>Zenaida Franktd> 397 <td>Software Engineertd> 398 <td>New Yorktd> 399 <td>63td> 400 <td>2010/01/04td> 401 <td>$125,250td> 402 tr> 403 <tr> 404 <td>Zorita Serranotd> 405 <td>Software Engineertd> 406 <td>San Franciscotd> 407 <td>56td> 408 <td>2012/06/01td> 409 <td>$115,000td> 410 tr> 411 <tr> 412 <td>Jennifer Acostatd> 413 <td>Junior Javascript Developertd> 414 <td>Edinburghtd> 415 <td>43td> 416 <td>2013/02/01td> 417 <td>$75,650td> 418 tr> 419 <tr> 420 <td>Cara Stevenstd> 421 <td>Sales Assistanttd> 422 <td>New Yorktd> 423 <td>46td> 424 <td>2011/12/06td> 425 <td>$145,600td> 426 tr> 427 <tr> 428 <td>Hermione Butlertd> 429 <td>Regional Directortd> 430 <td>Londontd> 431 <td>47td> 432 <td>2011/03/21td> 433 <td>$356,250td> 434 tr> 435 <tr> 436 <td>Lael Greertd> 437 <td>Systems Administratortd> 438 <td>Londontd> 439 <td>21td> 440 <td>2009/02/27td> 441 <td>$103,500td> 442 tr> 443 <tr> 444 <td>Jonas Alexandertd> 445 <td>Developertd> 446 <td>San Franciscotd> 447 <td>30td> 448 <td>2010/07/14td> 449 <td>$86,500td> 450 tr> 451 <tr> 452 <td>Shad Deckertd> 453 <td>Regional Directortd> 454 <td>Edinburghtd> 455 <td>51td> 456 <td>2008/11/13td> 457 <td>$183,000td> 458 tr> 459 <tr> 460 <td>Michael Brucetd> 461 <td>Javascript Developertd> 462 <td>Singaporetd> 463 <td>29td> 464 <td>2011/06/27td> 465 <td>$183,000td> 466 tr> 467 <tr> 468 <td>Donna Snidertd> 469 <td>Customer Supporttd> 470 <td>New Yorktd> 471 <td>27td> 472 <td>2011/01/25td> 473 <td>$112,000td> 474 tr> 475 tbody> 476 <tfoot> 477 <tr> 478 <th>Nameth> 479 <th>Positionth> 480 <th>Officeth> 481 <th>Ageth> 482 <th>Start dateth> 483 <th>Salaryth> 484 tr> 485 tfoot> 486 table> 487 <script src="./jquery-3.3.1.js">script> 488 <script src="./jquery.dataTables.min.js">script> 489 <script> 490 $(document).ready(function() { 491 $('#example').DataTable(); 492 $('#example').removeClass( 'display' ).addClass('table table-striped table-bordered'); 493 } ); 494 495 script> 496 body> 497 html>
效果: