JQuery笔记JQuery.DataTable.js使用。

 

相关文件:

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>

 

效果:

JQuery笔记JQuery.DataTable.js使用。_第1张图片

 

 

 

 

 
 

你可能感兴趣的:(JQuery笔记JQuery.DataTable.js使用。)