3

私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 

                        } ?>

ここで、合計列を追加する必要があります。

4

1 に答える 1

3

解決策は次のとおりです。- これを行うには、フッター コールバック関数を使用します。このコールバックは描画ごとに実行されます。したがって、テーブルのコンテンツが変更されるたびに、この関数が実行され、ページ上の合計給与が変更されます。

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

于 2015-03-04T10:47:42.660 に答える