dongliu4320 2017-08-10 13:52
浏览 202
已采纳

如何在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" }

    ]
});
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥15 树莓派5怎么用camera module 3啊
  • ¥20 java在应用程序里获取不到扬声器设备
  • ¥15 echarts动画效果的问题，请帮我添加一个动画。不要机器人回答。
  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统，原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时，终端显示出了sequence handled的进度条，但是并不出结果就自动终止回到命令提示行了是怎么回事：