dongliu4320
2017-08-10 13:52
浏览 188

如何在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:

enter image description here

I already make default data table like this : enter image description here

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?

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

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" }
    
        ]
    });
    
    已采纳该答案
    打赏 评论

相关推荐 更多相似问题