如何在Jquery Datatable的底部添加Total Cell

I need datatable to be implemented in my project. I wanna show total number at the bottom of the table like below:

I already make default data table like this :

This is my code.

<?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>

I've already searched but, there's few reference but I couldn't understand that How I can add Total cell and show at the bottom of datatable?

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

dongzhong1929 2017-08-10 14:09

关注

See this example here http://jsbin.com/putiyep/edit?js,output written by bindrid.

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

Basically it leverages the footerCallback of the API and use the column index of the table and basic math to return your total.

Excerpt of the code (again not my code):

// 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" }

    ]
});

本回答被题主选为最佳回答 , 对您是否有帮助呢?