如何在 Bootstrap 数据表中添加列值
How to add column values in Bootstrap Data Tables
我正在使用 Bootstrap DataTable
显示 mysql 条记录。它有搜索按钮,当用户输入值时,只有 table returns 对应的值。
演示:http://www.datatables.net/manual/styling/bootstrap-simple.html
现在可以添加特定列的所有数据。在上面的示例中,将有薪水列。现在我需要添加所有 57 人的薪水并将其显示为 Total 。而且当 table 更改时,值也必须同时更改。
请大家帮忙 :) 谢谢
$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列。
解决方法如下:- 使用页脚回调函数来执行此操作。
这个回调是 运行 每次抽奖。所以每当 table 的内容被改变时,这个函数 运行s 就会改变页面上的总薪水。
<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>
我正在使用 Bootstrap DataTable
显示 mysql 条记录。它有搜索按钮,当用户输入值时,只有 table returns 对应的值。
演示:http://www.datatables.net/manual/styling/bootstrap-simple.html
现在可以添加特定列的所有数据。在上面的示例中,将有薪水列。现在我需要添加所有 57 人的薪水并将其显示为 Total 。而且当 table 更改时,值也必须同时更改。
请大家帮忙 :) 谢谢
$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列。
解决方法如下:- 使用页脚回调函数来执行此操作。 这个回调是 运行 每次抽奖。所以每当 table 的内容被改变时,这个函数 运行s 就会改变页面上的总薪水。
<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>