如何在 Jquery Datatable 底部添加总单元格

Question

我需要在我的项目中实现数据表。我想在表格底部显示总数，如下所示：

我已经制作了这样的默认数据表：

这是我的代码。

<?php
    include "db.php";
    $obj->tglan=$obj->get_hari();
    if (isset($_POST['tanggal2'])) {
        $obj->tglan = $_POST['tanggal2'];

    }
?>


<!DOCTYPE html>
<html>
<head>

    <script type="text/javascript" src="assets/DataTables/media/js/jquery.js"></script>
    <script type="text/javascript" src="assets/DataTables/media/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="assets/DataTables/media/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="assets/DataTables/media/css/dataTables.bootstrap.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="assets/datepicker/css/bootstrap-datepicker3.css"/>
</head>
<body>
    <center>

        <h3>Daftar SPTA<br><?php echo $obj->tanggal("D, j M Y",$obj->tglan);?></h3>
    </center>
    <left>
        <h5>&nbsp&nbsp&nbspLast refreshed : <?php echo $obj->tanggal("D, j M Y",$obj->tglan)." ".date("H:i:s");?></h5>
    </left>
    <br/>
    <form action="viewLaporanUtama2.php" method="POST">
            <div class="form-group" >
                <label for="tanggal">&nbsp&nbsp&nbspTanggal</label>
                <input type="text" name="tanggal1" class="tanggal" id="myText" required/>
                <input type="submit" name="enter" value="Cari" class="btn btn-info btn-sm">
            </div>
     </form>

    <div class="container-fluid">
        <div class="table-responsive">
        <table border = '0' class="table table-striped table-bordered data" id="tabelSpta">
            <thead>
                <tr>
                    <th>No</th>
                    <th>No SPTA</th>            
                    <th>No Register Induk</th>
                    <th>Nama Petani</th>
                    <th>Gawang/Pos</th>
                    <th>Timbang Bruto</th>
                    <th>Giling</th>
                    <th>Timbang Tarra</th>
                    <th>Netto(kw)</th>
                    <th>Kode Rafraksi</th>
                    <th>Potongan (kw)</th>
                    <th>Netto Akhir (kw)</th>

                </tr>
            </thead>
            <tbody>
                <div id="bagReload">
                    <?php
                        echo $obj->tampilLaporan();
                    ?>
                </div>

            </tbody>
        </table>
    </div>
    </div>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        var tabel = $('.data').DataTable();
    });

</script>
<!-- <script src="js/jquery-3.2.1.min.js"></script> -->
<script src="assets/js/bootstrap.js"></script>
<script src="assets/datepicker/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
            $(document).ready(function () {
                $('.tanggal').datepicker({
                    format: "yyyy-mm-dd",
                    autoclose:true
                });
            });
</script>
</html>

我已经搜索过了，但参考资料很少，但我无法理解 如何添加总单元格并显示在数据表的底部？

Answer 1

在此处查看此示例 http://jsbin.com/putiyep/edit?js,output 由 bindrid 编写。

http://jsbin.com/putiyep/edit?js,output

基本上它利用 API 的 footerCallback 并使用表的列索引和基本数学来返回您的总数。

代码摘录（同样不是我的代码）：

// Table definition
var dtapi = $('#example').DataTable({
    data: dataSet,
    pageLength: 3,
    "deferRender": false,
    "footerCallback": function (tfoot, data, start, end, display) {
        var api = this.api();
        var p = api.column(4).data().reduce(function (a, b) {
            return a + b;
        }, 0)
        $(api.column(4).footer()).html(p);
        $("#total").val(p);
    },
    "order": [1],
    "columns": [

        // rest of the columns
        { data: "first_name" },
        { data: "last_name" },
        { data: "firstNumber" },
        {
            data: "secondNumber", render: function (data) {
                return '<input type="text" style="width:50px" value="' + data + '">';
            }
        },
        { data: "rowTotal" }

    ]
});