彰化一整天的論壇

 找回密碼
 立即註冊
查看: 56|回復: 0

【轉貼】datatable加總

[複製鏈接]
發表於 2019-7-17 16:22:46 | 顯示全部樓層 |閱讀模式
  1. <table id="example" class="display" style="width:100%">
  2.         <thead>
  3.             <tr>
  4.                 <th>First name</th>
  5.                 <th>Last name</th>
  6.                 <th>Position</th>
  7.                 <th>Office</th>
  8.                 <th>Salary</th>
  9.             </tr>
  10.         </thead>
  11.         <tbody>
  12.             <tr>
  13.                 <td>Tiger</td>
  14.                 <td>Nixon</td>
  15.                 <td>System Architect</td>
  16.                 <td>Edinburgh</td>
  17.                 <td>$320,800</td>
  18.             </tr>
  19.             <tr>
  20.                 <td>Garrett</td>
  21.                 <td>Winters</td>
  22.                 <td>Accountant</td>
  23.                 <td>Tokyo</td>
  24.                 <td>$170,750</td>
  25.             </tr>
  26.             <tr>
  27.                 <td>Ashton</td>
  28.                 <td>Cox</td>
  29.                 <td>Junior Technical Author</td>
  30.                 <td>San Francisco</td>
  31.                 <td>$86,000</td>
  32.             </tr>
  33.             <tr>
  34.                 <td>Cedric</td>
  35.                 <td>Kelly</td>
  36.                 <td>Senior Javascript Developer</td>
  37.                 <td>Edinburgh</td>
  38.                 <td>$433,060</td>
  39.             </tr>
  40.             <tr>
  41.                 <td>Airi</td>
  42.                 <td>Satou</td>
  43.                 <td>Accountant</td>
  44.                 <td>Tokyo</td>
  45.                 <td>$162,700</td>
  46.             </tr>
  47.             <tr>
  48.                 <td>Brielle</td>
  49.                 <td>Williamson</td>
  50.                 <td>Integration Specialist</td>
  51.                 <td>New York</td>
  52.                 <td>$372,000</td>
  53.             </tr>
  54.             <tr>
  55.                 <td>Herrod</td>
  56.                 <td>Chandler</td>
  57.                 <td>Sales Assistant</td>
  58.                 <td>San Francisco</td>
  59.                 <td>$137,500</td>
  60.             </tr>
  61.             <tr>
  62.                 <td>Rhona</td>
  63.                 <td>Davidson</td>
  64.                 <td>Integration Specialist</td>
  65.                 <td>Tokyo</td>
  66.                 <td>$327,900</td>
  67.             </tr>
  68.             <tr>
  69.                 <td>Colleen</td>
  70.                 <td>Hurst</td>
  71.                 <td>Javascript Developer</td>
  72.                 <td>San Francisco</td>
  73.                 <td>$205,500</td>
  74.             </tr>
  75.             <tr>
  76.                 <td>Sonya</td>
  77.                 <td>Frost</td>
  78.                 <td>Software Engineer</td>
  79.                 <td>Edinburgh</td>
  80.                 <td>$103,600</td>
  81.             </tr>
  82.             <tr>
  83.                 <td>Jena</td>
  84.                 <td>Gaines</td>
  85.                 <td>Office Manager</td>
  86.                 <td>London</td>
  87.                 <td>$90,560</td>
  88.             </tr>
  89.             <tr>
  90.                 <td>Quinn</td>
  91.                 <td>Flynn</td>
  92.                 <td>Support Lead</td>
  93.                 <td>Edinburgh</td>
  94.                 <td>$342,000</td>
  95.             </tr>
  96.             <tr>
  97.                 <td>Charde</td>
  98.                 <td>Marshall</td>
  99.                 <td>Regional Director</td>
  100.                 <td>San Francisco</td>
  101.                 <td>$470,600</td>
  102.             </tr>
  103.             <tr>
  104.                 <td>Haley</td>
  105.                 <td>Kennedy</td>
  106.                 <td>Senior Marketing Designer</td>
  107.                 <td>London</td>
  108.                 <td>$313,500</td>
  109.             </tr>
  110.             <tr>
  111.                 <td>Tatyana</td>
  112.                 <td>Fitzpatrick</td>
  113.                 <td>Regional Director</td>
  114.                 <td>London</td>
  115.                 <td>$385,750</td>
  116.             </tr>
  117.             <tr>
  118.                 <td>Michael</td>
  119.                 <td>Silva</td>
  120.                 <td>Marketing Designer</td>
  121.                 <td>London</td>
  122.                 <td>$198,500</td>
  123.             </tr>
  124.             <tr>
  125.                 <td>Paul</td>
  126.                 <td>Byrd</td>
  127.                 <td>Chief Financial Officer (CFO)</td>
  128.                 <td>New York</td>
  129.                 <td>$725,000</td>
  130.             </tr>
  131.             <tr>
  132.                 <td>Gloria</td>
  133.                 <td>Little</td>
  134.                 <td>Systems Administrator</td>
  135.                 <td>New York</td>
  136.                 <td>$237,500</td>
  137.             </tr>
  138.             <tr>
  139.                 <td>Bradley</td>
  140.                 <td>Greer</td>
  141.                 <td>Software Engineer</td>
  142.                 <td>London</td>
  143.                 <td>$132,000</td>
  144.             </tr>
  145.             <tr>
  146.                 <td>Dai</td>
  147.                 <td>Rios</td>
  148.                 <td>Personnel Lead</td>
  149.                 <td>Edinburgh</td>
  150.                 <td>$217,500</td>
  151.             </tr>
  152.             <tr>
  153.                 <td>Jenette</td>
  154.                 <td>Caldwell</td>
  155.                 <td>Development Lead</td>
  156.                 <td>New York</td>
  157.                 <td>$345,000</td>
  158.             </tr>
  159.             <tr>
  160.                 <td>Yuri</td>
  161.                 <td>Berry</td>
  162.                 <td>Chief Marketing Officer (CMO)</td>
  163.                 <td>New York</td>
  164.                 <td>$675,000</td>
  165.             </tr>
  166.             <tr>
  167.                 <td>Caesar</td>
  168.                 <td>Vance</td>
  169.                 <td>Pre-Sales Support</td>
  170.                 <td>New York</td>
  171.                 <td>$106,450</td>
  172.             </tr>
  173.             <tr>
  174.                 <td>Doris</td>
  175.                 <td>Wilder</td>
  176.                 <td>Sales Assistant</td>
  177.                 <td>Sidney</td>
  178.                 <td>$85,600</td>
  179.             </tr>
  180.             <tr>
  181.                 <td>Angelica</td>
  182.                 <td>Ramos</td>
  183.                 <td>Chief Executive Officer (CEO)</td>
  184.                 <td>London</td>
  185.                 <td>$1,200,000</td>
  186.             </tr>
  187.             <tr>
  188.                 <td>Gavin</td>
  189.                 <td>Joyce</td>
  190.                 <td>Developer</td>
  191.                 <td>Edinburgh</td>
  192.                 <td>$92,575</td>
  193.             </tr>
  194.             <tr>
  195.                 <td>Jennifer</td>
  196.                 <td>Chang</td>
  197.                 <td>Regional Director</td>
  198.                 <td>Singapore</td>
  199.                 <td>$357,650</td>
  200.             </tr>
  201.             <tr>
  202.                 <td>Brenden</td>
  203.                 <td>Wagner</td>
  204.                 <td>Software Engineer</td>
  205.                 <td>San Francisco</td>
  206.                 <td>$206,850</td>
  207.             </tr>
  208.             <tr>
  209.                 <td>Fiona</td>
  210.                 <td>Green</td>
  211.                 <td>Chief Operating Officer (COO)</td>
  212.                 <td>San Francisco</td>
  213.                 <td>$850,000</td>
  214.             </tr>
  215.             <tr>
  216.                 <td>Shou</td>
  217.                 <td>Itou</td>
  218.                 <td>Regional Marketing</td>
  219.                 <td>Tokyo</td>
  220.                 <td>$163,000</td>
  221.             </tr>
  222.             <tr>
  223.                 <td>Michelle</td>
  224.                 <td>House</td>
  225.                 <td>Integration Specialist</td>
  226.                 <td>Sidney</td>
  227.                 <td>$95,400</td>
  228.             </tr>
  229.             <tr>
  230.                 <td>Suki</td>
  231.                 <td>Burks</td>
  232.                 <td>Developer</td>
  233.                 <td>London</td>
  234.                 <td>$114,500</td>
  235.             </tr>
  236.             <tr>
  237.                 <td>Prescott</td>
  238.                 <td>Bartlett</td>
  239.                 <td>Technical Author</td>
  240.                 <td>London</td>
  241.                 <td>$145,000</td>
  242.             </tr>
  243.             <tr>
  244.                 <td>Gavin</td>
  245.                 <td>Cortez</td>
  246.                 <td>Team Leader</td>
  247.                 <td>San Francisco</td>
  248.                 <td>$235,500</td>
  249.             </tr>
  250.             <tr>
  251.                 <td>Martena</td>
  252.                 <td>Mccray</td>
  253.                 <td>Post-Sales support</td>
  254.                 <td>Edinburgh</td>
  255.                 <td>$324,050</td>
  256.             </tr>
  257.             <tr>
  258.                 <td>Unity</td>
  259.                 <td>Butler</td>
  260.                 <td>Marketing Designer</td>
  261.                 <td>San Francisco</td>
  262.                 <td>$85,675</td>
  263.             </tr>
  264.             <tr>
  265.                 <td>Howard</td>
  266.                 <td>Hatfield</td>
  267.                 <td>Office Manager</td>
  268.                 <td>San Francisco</td>
  269.                 <td>$164,500</td>
  270.             </tr>
  271.             <tr>
  272.                 <td>Hope</td>
  273.                 <td>Fuentes</td>
  274.                 <td>Secretary</td>
  275.                 <td>San Francisco</td>
  276.                 <td>$109,850</td>
  277.             </tr>
  278.             <tr>
  279.                 <td>Vivian</td>
  280.                 <td>Harrell</td>
  281.                 <td>Financial Controller</td>
  282.                 <td>San Francisco</td>
  283.                 <td>$452,500</td>
  284.             </tr>
  285.             <tr>
  286.                 <td>Timothy</td>
  287.                 <td>Mooney</td>
  288.                 <td>Office Manager</td>
  289.                 <td>London</td>
  290.                 <td>$136,200</td>
  291.             </tr>
  292.             <tr>
  293.                 <td>Jackson</td>
  294.                 <td>Bradshaw</td>
  295.                 <td>Director</td>
  296.                 <td>New York</td>
  297.                 <td>$645,750</td>
  298.             </tr>
  299.             <tr>
  300.                 <td>Olivia</td>
  301.                 <td>Liang</td>
  302.                 <td>Support Engineer</td>
  303.                 <td>Singapore</td>
  304.                 <td>$234,500</td>
  305.             </tr>
  306.             <tr>
  307.                 <td>Bruno</td>
  308.                 <td>Nash</td>
  309.                 <td>Software Engineer</td>
  310.                 <td>London</td>
  311.                 <td>$163,500</td>
  312.             </tr>
  313.             <tr>
  314.                 <td>Sakura</td>
  315.                 <td>Yamamoto</td>
  316.                 <td>Support Engineer</td>
  317.                 <td>Tokyo</td>
  318.                 <td>$139,575</td>
  319.             </tr>
  320.             <tr>
  321.                 <td>Thor</td>
  322.                 <td>Walton</td>
  323.                 <td>Developer</td>
  324.                 <td>New York</td>
  325.                 <td>$98,540</td>
  326.             </tr>
  327.             <tr>
  328.                 <td>Finn</td>
  329.                 <td>Camacho</td>
  330.                 <td>Support Engineer</td>
  331.                 <td>San Francisco</td>
  332.                 <td>$87,500</td>
  333.             </tr>
  334.             <tr>
  335.                 <td>Serge</td>
  336.                 <td>Baldwin</td>
  337.                 <td>Data Coordinator</td>
  338.                 <td>Singapore</td>
  339.                 <td>$138,575</td>
  340.             </tr>
  341.             <tr>
  342.                 <td>Zenaida</td>
  343.                 <td>Frank</td>
  344.                 <td>Software Engineer</td>
  345.                 <td>New York</td>
  346.                 <td>$125,250</td>
  347.             </tr>
  348.             <tr>
  349.                 <td>Zorita</td>
  350.                 <td>Serrano</td>
  351.                 <td>Software Engineer</td>
  352.                 <td>San Francisco</td>
  353.                 <td>$115,000</td>
  354.             </tr>
  355.             <tr>
  356.                 <td>Jennifer</td>
  357.                 <td>Acosta</td>
  358.                 <td>Junior Javascript Developer</td>
  359.                 <td>Edinburgh</td>
  360.                 <td>$75,650</td>
  361.             </tr>
  362.             <tr>
  363.                 <td>Cara</td>
  364.                 <td>Stevens</td>
  365.                 <td>Sales Assistant</td>
  366.                 <td>New York</td>
  367.                 <td>$145,600</td>
  368.             </tr>
  369.             <tr>
  370.                 <td>Hermione</td>
  371.                 <td>Butler</td>
  372.                 <td>Regional Director</td>
  373.                 <td>London</td>
  374.                 <td>$356,250</td>
  375.             </tr>
  376.             <tr>
  377.                 <td>Lael</td>
  378.                 <td>Greer</td>
  379.                 <td>Systems Administrator</td>
  380.                 <td>London</td>
  381.                 <td>$103,500</td>
  382.             </tr>
  383.             <tr>
  384.                 <td>Jonas</td>
  385.                 <td>Alexander</td>
  386.                 <td>Developer</td>
  387.                 <td>San Francisco</td>
  388.                 <td>$86,500</td>
  389.             </tr>
  390.             <tr>
  391.                 <td>Shad</td>
  392.                 <td>Decker</td>
  393.                 <td>Regional Director</td>
  394.                 <td>Edinburgh</td>
  395.                 <td>$183,000</td>
  396.             </tr>
  397.             <tr>
  398.                 <td>Michael</td>
  399.                 <td>Bruce</td>
  400.                 <td>Javascript Developer</td>
  401.                 <td>Singapore</td>
  402.                 <td>$183,000</td>
  403.             </tr>
  404.             <tr>
  405.                 <td>Donna</td>
  406.                 <td>Snider</td>
  407.                 <td>Customer Support</td>
  408.                 <td>New York</td>
  409.                 <td>$112,000</td>
  410.             </tr>
  411.         </tbody>
  412.         <tfoot>
  413.             <tr>
  414.                 <th colspan="4" style="text-align:right">Total:</th>
  415.                 <th></th>
  416.             </tr>
  417.         </tfoot>
  418.     </table>
複製代碼
  1. $(document).ready(function() {
  2.     $('#example').DataTable( {
  3.         "footerCallback": function ( row, data, start, end, display ) {
  4.             var api = this.api(), data;

  5.             // Remove the formatting to get integer data for summation
  6.             var intVal = function ( i ) {
  7.                 return typeof i === 'string' ?
  8.                     i.replace(/[\$,]/g, '')*1 :
  9.                     typeof i === 'number' ?
  10.                         i : 0;
  11.             };

  12.             // Total over all pages
  13.             total = api
  14.                 .column( 4 )
  15.                 .data()
  16.                 .reduce( function (a, b) {
  17.                     return intVal(a) + intVal(b);
  18.                 }, 0 );

  19.             // Total over this page
  20.             pageTotal = api
  21.                 .column( 4, { page: 'current'} )
  22.                 .data()
  23.                 .reduce( function (a, b) {
  24.                     return intVal(a) + intVal(b);
  25.                 }, 0 );

  26.             // Update footer
  27.             $( api.column( 4 ).footer() ).html(
  28.                 '


  29. [url=https://datatables.net/examples/advanced_init/footer_callback.html]https://datatables.net/examples/advanced_init/footer_callback.html[/url]


  30. +pageTotal +' (


  31. [url=https://datatables.net/examples/advanced_init/footer_callback.html]https://datatables.net/examples/advanced_init/footer_callback.html[/url]


  32. + total +' total)'
  33.             );
  34.         }
  35.     } );
  36. } );
複製代碼



https://datatables.net/examples/advanced_init/footer_callback.html


回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

 ㄚ母滴雞湯
 員林香純滴雞精

Archiver|手機版|小黑屋|彰化一整天的論壇(Excel,Office)  |网站地图

GMT+8, 2019-8-26 04:52 , Processed in 0.123530 second(s), 19 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表