Advertisement
RahmanIEN

menggunakan datatabels

Jun 23rd, 2023
63
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 13.03 KB | Source Code | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Datatabels</title>
  7.     <link
  8.      rel="stylesheet"
  9.      href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"
  10.    />
  11.     <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  12.     <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
  13.   </head>
  14.   <body>
  15.     <table id="example" class="display" style="width: 100%">
  16.       <thead>
  17.         <tr>
  18.           <th>Name</th>
  19.           <th>Position</th>
  20.           <th>Office</th>
  21.           <th>Age</th>
  22.           <th>Start date</th>
  23.           <th>Salary</th>
  24.         </tr>
  25.       </thead>
  26.       <tbody>
  27.         <tr>
  28.           <td>Tiger Nixon</td>
  29.           <td>System Architect</td>
  30.           <td>Edinburgh</td>
  31.           <td>61</td>
  32.           <td>2011-04-25</td>
  33.           <td>$320,800</td>
  34.         </tr>
  35.         <tr>
  36.           <td>Garrett Winters</td>
  37.           <td>Accountant</td>
  38.           <td>Tokyo</td>
  39.           <td>63</td>
  40.           <td>2011-07-25</td>
  41.           <td>$170,750</td>
  42.         </tr>
  43.         <tr>
  44.           <td>Ashton Cox</td>
  45.           <td>Junior Technical Author</td>
  46.           <td>San Francisco</td>
  47.           <td>66</td>
  48.           <td>2009-01-12</td>
  49.           <td>$86,000</td>
  50.         </tr>
  51.         <tr>
  52.           <td>Cedric Kelly</td>
  53.           <td>Senior Javascript Developer</td>
  54.           <td>Edinburgh</td>
  55.           <td>22</td>
  56.           <td>2012-03-29</td>
  57.           <td>$433,060</td>
  58.         </tr>
  59.         <tr>
  60.           <td>Airi Satou</td>
  61.           <td>Accountant</td>
  62.           <td>Tokyo</td>
  63.           <td>33</td>
  64.           <td>2008-11-28</td>
  65.           <td>$162,700</td>
  66.         </tr>
  67.         <tr>
  68.           <td>Brielle Williamson</td>
  69.           <td>Integration Specialist</td>
  70.           <td>New York</td>
  71.           <td>61</td>
  72.           <td>2012-12-02</td>
  73.           <td>$372,000</td>
  74.         </tr>
  75.         <tr>
  76.           <td>Herrod Chandler</td>
  77.           <td>Sales Assistant</td>
  78.           <td>San Francisco</td>
  79.           <td>59</td>
  80.           <td>2012-08-06</td>
  81.           <td>$137,500</td>
  82.         </tr>
  83.         <tr>
  84.           <td>Rhona Davidson</td>
  85.           <td>Integration Specialist</td>
  86.           <td>Tokyo</td>
  87.           <td>55</td>
  88.           <td>2010-10-14</td>
  89.           <td>$327,900</td>
  90.         </tr>
  91.         <tr>
  92.           <td>Colleen Hurst</td>
  93.           <td>Javascript Developer</td>
  94.           <td>San Francisco</td>
  95.           <td>39</td>
  96.           <td>2009-09-15</td>
  97.           <td>$205,500</td>
  98.         </tr>
  99.         <tr>
  100.           <td>Sonya Frost</td>
  101.           <td>Software Engineer</td>
  102.           <td>Edinburgh</td>
  103.           <td>23</td>
  104.           <td>2008-12-13</td>
  105.           <td>$103,600</td>
  106.         </tr>
  107.         <tr>
  108.           <td>Jena Gaines</td>
  109.           <td>Office Manager</td>
  110.           <td>London</td>
  111.           <td>30</td>
  112.           <td>2008-12-19</td>
  113.           <td>$90,560</td>
  114.         </tr>
  115.         <tr>
  116.           <td>Quinn Flynn</td>
  117.           <td>Support Lead</td>
  118.           <td>Edinburgh</td>
  119.           <td>22</td>
  120.           <td>2013-03-03</td>
  121.           <td>$342,000</td>
  122.         </tr>
  123.         <tr>
  124.           <td>Charde Marshall</td>
  125.           <td>Regional Director</td>
  126.           <td>San Francisco</td>
  127.           <td>36</td>
  128.           <td>2008-10-16</td>
  129.           <td>$470,600</td>
  130.         </tr>
  131.         <tr>
  132.           <td>Haley Kennedy</td>
  133.           <td>Senior Marketing Designer</td>
  134.           <td>London</td>
  135.           <td>43</td>
  136.           <td>2012-12-18</td>
  137.           <td>$313,500</td>
  138.         </tr>
  139.         <tr>
  140.           <td>Tatyana Fitzpatrick</td>
  141.           <td>Regional Director</td>
  142.           <td>London</td>
  143.           <td>19</td>
  144.           <td>2010-03-17</td>
  145.           <td>$385,750</td>
  146.         </tr>
  147.         <tr>
  148.           <td>Michael Silva</td>
  149.           <td>Marketing Designer</td>
  150.           <td>London</td>
  151.           <td>66</td>
  152.           <td>2012-11-27</td>
  153.           <td>$198,500</td>
  154.         </tr>
  155.         <tr>
  156.           <td>Paul Byrd</td>
  157.           <td>Chief Financial Officer (CFO)</td>
  158.           <td>New York</td>
  159.           <td>64</td>
  160.           <td>2010-06-09</td>
  161.           <td>$725,000</td>
  162.         </tr>
  163.         <tr>
  164.           <td>Gloria Little</td>
  165.           <td>Systems Administrator</td>
  166.           <td>New York</td>
  167.           <td>59</td>
  168.           <td>2009-04-10</td>
  169.           <td>$237,500</td>
  170.         </tr>
  171.         <tr>
  172.           <td>Bradley Greer</td>
  173.           <td>Software Engineer</td>
  174.           <td>London</td>
  175.           <td>41</td>
  176.           <td>2012-10-13</td>
  177.           <td>$132,000</td>
  178.         </tr>
  179.         <tr>
  180.           <td>Dai Rios</td>
  181.           <td>Personnel Lead</td>
  182.           <td>Edinburgh</td>
  183.           <td>35</td>
  184.           <td>2012-09-26</td>
  185.           <td>$217,500</td>
  186.         </tr>
  187.         <tr>
  188.           <td>Jenette Caldwell</td>
  189.           <td>Development Lead</td>
  190.           <td>New York</td>
  191.           <td>30</td>
  192.           <td>2011-09-03</td>
  193.           <td>$345,000</td>
  194.         </tr>
  195.         <tr>
  196.           <td>Yuri Berry</td>
  197.           <td>Chief Marketing Officer (CMO)</td>
  198.           <td>New York</td>
  199.           <td>40</td>
  200.           <td>2009-06-25</td>
  201.           <td>$675,000</td>
  202.         </tr>
  203.         <tr>
  204.           <td>Caesar Vance</td>
  205.           <td>Pre-Sales Support</td>
  206.           <td>New York</td>
  207.           <td>21</td>
  208.           <td>2011-12-12</td>
  209.           <td>$106,450</td>
  210.         </tr>
  211.         <tr>
  212.           <td>Doris Wilder</td>
  213.           <td>Sales Assistant</td>
  214.           <td>Sydney</td>
  215.           <td>23</td>
  216.           <td>2010-09-20</td>
  217.           <td>$85,600</td>
  218.         </tr>
  219.         <tr>
  220.           <td>Angelica Ramos</td>
  221.           <td>Chief Executive Officer (CEO)</td>
  222.           <td>London</td>
  223.           <td>47</td>
  224.           <td>2009-10-09</td>
  225.           <td>$1,200,000</td>
  226.         </tr>
  227.         <tr>
  228.           <td>Gavin Joyce</td>
  229.           <td>Developer</td>
  230.           <td>Edinburgh</td>
  231.           <td>42</td>
  232.           <td>2010-12-22</td>
  233.           <td>$92,575</td>
  234.         </tr>
  235.         <tr>
  236.           <td>Jennifer Chang</td>
  237.           <td>Regional Director</td>
  238.           <td>Singapore</td>
  239.           <td>28</td>
  240.           <td>2010-11-14</td>
  241.           <td>$357,650</td>
  242.         </tr>
  243.         <tr>
  244.           <td>Brenden Wagner</td>
  245.           <td>Software Engineer</td>
  246.           <td>San Francisco</td>
  247.           <td>28</td>
  248.           <td>2011-06-07</td>
  249.           <td>$206,850</td>
  250.         </tr>
  251.         <tr>
  252.           <td>Fiona Green</td>
  253.           <td>Chief Operating Officer (COO)</td>
  254.           <td>San Francisco</td>
  255.           <td>48</td>
  256.           <td>2010-03-11</td>
  257.           <td>$850,000</td>
  258.         </tr>
  259.         <tr>
  260.           <td>Shou Itou</td>
  261.           <td>Regional Marketing</td>
  262.           <td>Tokyo</td>
  263.           <td>20</td>
  264.           <td>2011-08-14</td>
  265.           <td>$163,000</td>
  266.         </tr>
  267.         <tr>
  268.           <td>Michelle House</td>
  269.           <td>Integration Specialist</td>
  270.           <td>Sydney</td>
  271.           <td>37</td>
  272.           <td>2011-06-02</td>
  273.           <td>$95,400</td>
  274.         </tr>
  275.         <tr>
  276.           <td>Suki Burks</td>
  277.           <td>Developer</td>
  278.           <td>London</td>
  279.           <td>53</td>
  280.           <td>2009-10-22</td>
  281.           <td>$114,500</td>
  282.         </tr>
  283.         <tr>
  284.           <td>Prescott Bartlett</td>
  285.           <td>Technical Author</td>
  286.           <td>London</td>
  287.           <td>27</td>
  288.           <td>2011-05-07</td>
  289.           <td>$145,000</td>
  290.         </tr>
  291.         <tr>
  292.           <td>Gavin Cortez</td>
  293.           <td>Team Leader</td>
  294.           <td>San Francisco</td>
  295.           <td>22</td>
  296.           <td>2008-10-26</td>
  297.           <td>$235,500</td>
  298.         </tr>
  299.         <tr>
  300.           <td>Martena Mccray</td>
  301.           <td>Post-Sales support</td>
  302.           <td>Edinburgh</td>
  303.           <td>46</td>
  304.           <td>2011-03-09</td>
  305.           <td>$324,050</td>
  306.         </tr>
  307.         <tr>
  308.           <td>Unity Butler</td>
  309.           <td>Marketing Designer</td>
  310.           <td>San Francisco</td>
  311.           <td>47</td>
  312.           <td>2009-12-09</td>
  313.           <td>$85,675</td>
  314.         </tr>
  315.         <tr>
  316.           <td>Howard Hatfield</td>
  317.           <td>Office Manager</td>
  318.           <td>San Francisco</td>
  319.           <td>51</td>
  320.           <td>2008-12-16</td>
  321.           <td>$164,500</td>
  322.         </tr>
  323.         <tr>
  324.           <td>Hope Fuentes</td>
  325.           <td>Secretary</td>
  326.           <td>San Francisco</td>
  327.           <td>41</td>
  328.           <td>2010-02-12</td>
  329.           <td>$109,850</td>
  330.         </tr>
  331.         <tr>
  332.           <td>Vivian Harrell</td>
  333.           <td>Financial Controller</td>
  334.           <td>San Francisco</td>
  335.           <td>62</td>
  336.           <td>2009-02-14</td>
  337.           <td>$452,500</td>
  338.         </tr>
  339.         <tr>
  340.           <td>Timothy Mooney</td>
  341.           <td>Office Manager</td>
  342.           <td>London</td>
  343.           <td>37</td>
  344.           <td>2008-12-11</td>
  345.           <td>$136,200</td>
  346.         </tr>
  347.         <tr>
  348.           <td>Jackson Bradshaw</td>
  349.           <td>Director</td>
  350.           <td>New York</td>
  351.           <td>65</td>
  352.           <td>2008-09-26</td>
  353.           <td>$645,750</td>
  354.         </tr>
  355.         <tr>
  356.           <td>Olivia Liang</td>
  357.           <td>Support Engineer</td>
  358.           <td>Singapore</td>
  359.           <td>64</td>
  360.           <td>2011-02-03</td>
  361.           <td>$234,500</td>
  362.         </tr>
  363.         <tr>
  364.           <td>Bruno Nash</td>
  365.           <td>Software Engineer</td>
  366.           <td>London</td>
  367.           <td>38</td>
  368.           <td>2011-05-03</td>
  369.           <td>$163,500</td>
  370.         </tr>
  371.         <tr>
  372.           <td>Sakura Yamamoto</td>
  373.           <td>Support Engineer</td>
  374.           <td>Tokyo</td>
  375.           <td>37</td>
  376.           <td>2009-08-19</td>
  377.           <td>$139,575</td>
  378.         </tr>
  379.         <tr>
  380.           <td>Thor Walton</td>
  381.           <td>Developer</td>
  382.           <td>New York</td>
  383.           <td>61</td>
  384.           <td>2013-08-11</td>
  385.           <td>$98,540</td>
  386.         </tr>
  387.         <tr>
  388.           <td>Finn Camacho</td>
  389.           <td>Support Engineer</td>
  390.           <td>San Francisco</td>
  391.           <td>47</td>
  392.           <td>2009-07-07</td>
  393.           <td>$87,500</td>
  394.         </tr>
  395.         <tr>
  396.           <td>Serge Baldwin</td>
  397.           <td>Data Coordinator</td>
  398.           <td>Singapore</td>
  399.           <td>64</td>
  400.           <td>2012-04-09</td>
  401.           <td>$138,575</td>
  402.         </tr>
  403.         <tr>
  404.           <td>Zenaida Frank</td>
  405.           <td>Software Engineer</td>
  406.           <td>New York</td>
  407.           <td>63</td>
  408.           <td>2010-01-04</td>
  409.           <td>$125,250</td>
  410.         </tr>
  411.         <tr>
  412.           <td>Zorita Serrano</td>
  413.           <td>Software Engineer</td>
  414.           <td>San Francisco</td>
  415.           <td>56</td>
  416.           <td>2012-06-01</td>
  417.           <td>$115,000</td>
  418.         </tr>
  419.         <tr>
  420.           <td>Jennifer Acosta</td>
  421.           <td>Junior Javascript Developer</td>
  422.           <td>Edinburgh</td>
  423.           <td>43</td>
  424.           <td>2013-02-01</td>
  425.           <td>$75,650</td>
  426.         </tr>
  427.         <tr>
  428.           <td>Cara Stevens</td>
  429.           <td>Sales Assistant</td>
  430.           <td>New York</td>
  431.           <td>46</td>
  432.           <td>2011-12-06</td>
  433.           <td>$145,600</td>
  434.         </tr>
  435.         <tr>
  436.           <td>Hermione Butler</td>
  437.           <td>Regional Director</td>
  438.           <td>London</td>
  439.           <td>47</td>
  440.           <td>2011-03-21</td>
  441.           <td>$356,250</td>
  442.         </tr>
  443.         <tr>
  444.           <td>Lael Greer</td>
  445.           <td>Systems Administrator</td>
  446.           <td>London</td>
  447.           <td>21</td>
  448.           <td>2009-02-27</td>
  449.           <td>$103,500</td>
  450.         </tr>
  451.         <tr>
  452.           <td>Jonas Alexander</td>
  453.           <td>Developer</td>
  454.           <td>San Francisco</td>
  455.           <td>30</td>
  456.           <td>2010-07-14</td>
  457.           <td>$86,500</td>
  458.         </tr>
  459.         <tr>
  460.           <td>Shad Decker</td>
  461.           <td>Regional Director</td>
  462.           <td>Edinburgh</td>
  463.           <td>51</td>
  464.           <td>2008-11-13</td>
  465.           <td>$183,000</td>
  466.         </tr>
  467.         <tr>
  468.           <td>Michael Bruce</td>
  469.           <td>Javascript Developer</td>
  470.           <td>Singapore</td>
  471.           <td>29</td>
  472.           <td>2011-06-27</td>
  473.           <td>$183,000</td>
  474.         </tr>
  475.         <tr>
  476.           <td>Donna Snider</td>
  477.           <td>Customer Support</td>
  478.           <td>New York</td>
  479.           <td>27</td>
  480.           <td>2011-01-25</td>
  481.           <td>$112,000</td>
  482.         </tr>
  483.       </tbody>
  484.       <tfoot>
  485.         <tr>
  486.           <th>Name</th>
  487.           <th>Position</th>
  488.           <th>Office</th>
  489.           <th>Age</th>
  490.           <th>Start date</th>
  491.           <th>Salary</th>
  492.         </tr>
  493.       </tfoot>
  494.     </table>
  495.   </body>
  496.   <script>
  497.     $(document).ready(function () {
  498.       $("#example").DataTable();
  499.     });
  500.   </script>
  501. </html>
  502.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement