彰化一整天的論壇

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

【轉貼】datatable加總範例

[複製鏈接]
發表於 2019-7-17 16:14:11 | 顯示全部樓層 |閱讀模式
本帖最後由 discuz 於 2019-7-17 16:18 編輯
  1. <table id="example">
  2.     <thead>
  3.         <tr><th class="sum">a column</th>
  4.         <th class="sum">b column</th></tr>
  5.     </thead>
  6.     <tbody>
  7.         <tr><td >10</td> <td>15</td></tr>
  8.         <tr><td>10</td> <td>18</td></tr>
  9.         <tr><td>20</td> <td>20</td></tr>
  10.         <tr><td>20</td> <td>25</td></tr>
  11.         <tr><td>30</td> <td>28</td></tr>
  12.         <tr><td>30</td> <td>30</td></tr>
  13.     </tbody>
  14.     <tfoot>
  15.     <tr>
  16.       <th>
  17.         
  18.       </th>
  19.       <th class="Int">
  20.         
  21.       </th>
  22.       </tr>
  23.     </tfoot>
  24. </table>

複製代碼

  1. var table = $("#example").DataTable({
  2. "initComplete": function (settings, json) {
  3. var api = this.api();
  4. CalculateTableSummary(this);
  5. },
  6.                 "footerCallback": function ( row, data, start, end, display ) {
  7.     console.log('aaya');
  8.                     var api = this.api(), data;         
  9.      CalculateTableSummary(this);
  10.      return ;               
  11.                         }
  12. });



  13. function CalculateTableSummary(table) {
  14.     try {

  15.         var intVal = function (i) {
  16.             return typeof i === 'string' ?
  17.                     i.replace(/[\$,]/g, '') * 1 :
  18.                     typeof i === 'number' ?
  19.                         i : 0;
  20.         };

  21.         var api = table.api();
  22.         api.columns(".sum").eq(0).each(function (index) {
  23.             var column = api.column(index,{page:'current'});

  24.             var sum = column
  25.                .data()
  26.                .reduce(function (a, b) {
  27.                    //return parseInt(a, 10) + parseInt(b, 10);
  28.                    return intVal(a) + intVal(b);
  29.                }, 0);
  30.             

  31. console.log(sum);

  32.             if ($(column.footer()).hasClass("Int")) {
  33.                 $(column.footer()).html('' + sum.toFixed(0));
  34.             } else {
  35.                 $(column.footer()).html('' + sum.toFixed(2));
  36.             }
  37.          
  38.         });
  39.     } catch (e) {
  40.         console.log('Error in CalculateTableSummary');
  41.         console.log(e)
  42.     }
  43. }
複製代碼

https://stackoverflow.com/questions/38715289/jquery-datatable-calculate-sum-in-footer-while-searching

http://jsfiddle.net/ubh6crqu/2/

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

使用道具 舉報

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

本版積分規則

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

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

GMT+8, 2019-8-19 03:48 , Processed in 0.151296 second(s), 19 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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