如何在引导数据表中添加列值答案

【问题标题】：How to add column values in Bootstrap Data Tables如何在引导数据表中添加列值
【发布时间】：2015-03-04 10:17:58
【问题描述】：

我使用Bootstrap DataTable 来显示mysql 记录。它有搜索按钮，当用户输入值时，表格只返回相应的值。

演示：http://www.datatables.net/manual/styling/bootstrap-simple.html

现在可以添加特定列的所有数据。在上面的示例中，将有薪水列。现在我需要添加所有 57 人的薪水并将其显示为 Total 。而且当表格改变时，值也必须同时改变。

请帮忙 :) 谢谢

                  $result22=mysql_query("select * from cont_details");
                        if(mysql_num_rows($result22)>0)
                        {
                        while($row22=mysql_fetch_array($result22))
                        {?>
    <tr <?php $line_qry = mysql_query("SELECT * FROM cont_sold  WHERE cont_details_id= '".$row22['cont_details_id']."'");
if(mysql_num_rows($line_qry)>0)echo'style="color:green;"'  ?>>

        <td><?php  echo $row22['cont_no']; $cont_details_id5 = $row22['cont_details_id']; ?></td>
        <td>
            <?PHP 
                $qry7 = mysql_query("SELECT * FROM depot_charges WHERE
                `cont_details_id` = '$cont_details_id5' order by (str_to_date(`gate_in`,'%d-%m-%Y')) desc LIMIT 1");
                $row7 = mysql_fetch_array($qry7);
                $depot_details_id = $row7['depot_details_id'];

                $qry8 = mysql_query("SELECT * FROM depot_details WHERE `depot_details_id` = '$depot_details_id'");
                $row8 = mysql_fetch_array($qry8);
                echo $depot_name = $row8['depot_name'];
             ?>
         </td>
        <td>
           <?PHP $row8['depot_charge']; ?>
        </td>
        <td>
            <?PHP $row8['depot_handling']; // ?>
        </td>
        <td>
            <?PHP $row8['depot_repair'];     ?>
        </td>
        <td> 
           <?PHP  $row8['depot_place'];  ?>
        </td>
         <td><?php $row8['cont_price'];  ?></td>
        <td>
          <?php  ?>
        </td>

        <td><?php  echo $row8['cont_other'];  ?></td>

        <td>
            <?PHP $row8['total'];   ?>
        </td>
    </tr>

                        <?php 

                        } ?>

这里我需要添加 Total 列。

【问题讨论】：

你已经尝试了什么？如果您可以发布您尝试过的代码示例，这可能有助于诊断您需要帮助的地方。
发布您的 HTML、脚本和代码
我对这个数据表一无所知。刚刚检查了论坛和谷歌，但我不知道该怎么做，所以发布了问题。
@FrebinFrancis 检查代码，只是简单的 php 代码

标签： jquery html datatables jquery-datatables bootstrap-table

【解决方案1】：

这里是解决方案：- 使用页脚回调函数来做到这一点。此回调在每次绘制时运行。因此，每当更改表格内容时，此函数都会运行并更改页面上的总工资。

<div class="container">

<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
    <thead>
        <tr>
            <th>Name</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>500</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>200</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>200</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>200</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
           <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>lod</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>aeda</td>
            <td>100</td>
        </tr>
        <tr>
             <td>xyz</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>xyz</td>
            <td>100</td>
        </tr>
        <tr>
            <td>xyz</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
             <td>abc</td>
            <td>100</td>
        </tr>
        <tr>
            <td>abc</td>
            <td>100</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
        <td colspan='2'> <span style="float:right;"id ='totalSalary'>dsada </span> </td>
        </tr>

    </tfoot>
</table>

        </div>

<script>
    $(document).ready(function() {
        $('#example').dataTable({   
            "sPaginationType": "full_numbers",
            "footerCallback": function ( row, data, start, end, display ) {
                    var api = this.api(), data;  
                    // Remove the formatting to get integer data for summation
                    var intVal = function ( i ) {
                        return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ?  i : 0;
                    };

                    // total_salary over all pages
                    total_salary = api.column( 1 ).data().reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    },0 );

                    // total_page_salary over this page
                    total_page_salary = api.column( 1, { page: 'current'} ).data().reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );

                    total_page_salary = parseFloat(total_page_salary);
                    total_salary = parseFloat(total_salary);
                    // Update footer
                    $('#totalSalary').html(total_page_salary.toFixed(2)+"/"+total_salary.toFixed(2));               
                },      
        });
    });

</script>

工作演示：http://jsfiddle.net/ishandemon/tb058mLq/2/

【讨论】：

您只需在脚本中添加一个“footerCallback”即可。
我怎么不知道这个脚本在做什么。，。所以我需要阅读或学习:) 请告诉我链接在哪里我可以阅读这个
是的，你可以在这里研究 DataTable 页脚回调：datatables.net/examples/advanced_init/footer_callback.html
在我的表中我需要添加第 10 列 .. 我应该在哪里更改或提及？
total_salary = api.column( 1/* 这里（列数从0开始）*/ ).data().reduce( function (a, b) { return intVal(a) + intVal( b); },0 );